How to Add Icons in Functions.php

[santosfel5]

I’ve injected some icons above my copyright footer in X theme, but I can’t seem to get the icons to display. I know there is a social icons option available for the footer, but I’ve got to add a few custom icons, so the injection method seemed like a better fit.

I’ve panned over all the documentation that X theme offers regarding icon usage, but to no avail. The icons are not appearing on the site. Here is the site I’ve added these icons to: https://octocogstage.wpengine.com

Any direction would be appreciated:

//Adds unique social icons to footer of page above copyright

function custom_content_before_copyright_footer() {
 ?>
 <div class="x-row-inner">
   <div class="e7-6 x-col">
   <a class="e7-7 x-anchor x-anchor-button" tabindex="0" href="#" target="_blank" style="outline: none;">
   <div class="x-anchor-content">
  <span class="x-graphic" aria-hidden="true">
  <i class="x-icon x-graphic-icon x-graphic-primary" aria-hidden="true" data-x-icon-s="&#xf39e;"></i>
  </span>
      </div>
   </a></div>
   </div>
   <?php
}

add_action('x_after_view_global__nav-footer', 'custom_content_before_copyright_footer');

[lely]

Hi @santosfel5,

Please try this:

//Adds unique social icons to footer of page above copyright

function custom_content_before_copyright_footer() {
 ?>
 <div class="x-row-inner">
   <div class="x-col">
   <a class="x-anchor x-anchor-button" tabindex="0" href="#" target="_blank" style="outline: none;">
      <i class="x-icon" aria-hidden="true" data-x-icon-b=""></i>
    </a></div>
   </div>
   <?php
}

add_action('x_after_view_global__nav-footer', 'custom_content_before_copyright_footer');

That is for this icon: https://fontawesome.com/icons/facebook-f
The best way to get the value is to add an icon element on a test page. Select which icon you want. Then on a frontend copy the generated HTML paste it on your code.

Another way is using do_shortcode function.
See this icon shortcode as reference: http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps.

[santosfel5]

I just tried the code you entered but no dice. I also tried copy and paste the icon into the value for data-x-icon-b=“”, but no luck there either.

I get a feeling it is not pulling up the font awesome library for some reason which results in Unicode error symbol  or nothing appearing.

I don’t see an option to add urls to shortcode tags. Is it possible to wrap a do_shortcode function while wrapping the shortcode in an a tag?

[friech]

Hi @santosfel5,

I don’t see you change the data-x-icon-s="" to data-x-icon-b="", you need to take that into consideration as of Font Awesome version 5 they split icons into multiple fonts (solid, brand, & outline). You can read more about that here.

data-x-icon-s=""

• 

data-x-icon-b=""

• 

Hope it helps,
Cheers!