0

I am developing a WordPress theme and as part of my header wish to include some Font Awesome icons (see below):

<div class="header-socials">
  <div class="social-item">
    <a href="#"><i class="fab fa-instagram"></i></a>
  </div>
  <div class="social-item">
    <a href="#"><i class="fab fa-facebook-f"></i></a>
  </div>
  <div class="social-item">
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
  </div>
</div>

I have tried using the Font Awesome plugin (as recommended by font awesome) as well as "manually adding font awesome to wordpress" following the guidance set out here (which includes modifying functions.php). I have also tried doing the old classic of wp_enqueue_scripts, but this doesn't seem to work either! Currently I have in my functions.php:

if (! function_exists('fa_custom_setup_kit') ) {
  function fa_custom_setup_kit($kit_url = '') {
    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}

fa_custom_setup_kit('https://kit.fontawesome.com/my_kit_code.js');

(with my_kit_code replaced with my actual kit code).This indeed results in the loading of font awesome at least that what Chrome dev tools are showing, this line is currently loaded inside my head tag:

<script type="text/javascript" src="https://kit.fontawesome.com/my_kit_code.js"></script>

Could anyone suggest as to what I am overlooking/doing wrong etc? Thanks in advance.

1 Answer 1

0

You can go about this in a number of ways. 1) Copy and paste the script tag containing your font-awesome kit in your footer.php before the closing body tag. 2) Using wp_enqueue_style. Below is a working example of a custom WordPress theme with FA enqueued: `function theme_enqueue_scripts() { wp_enqueue_style( 'Font_Awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' ); wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'Style', get_template_directory_uri() . '/style.css' );

wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.min.js', array(), '3.4.1', true );
wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );` \ You can simply copy and paste the code(within the back-ticks) in your functions.php file, then modify to suite your need. Hope that helps.

1
  • Okay, so after some toying around the icons are now loading using both your method (2) and using the function I quoted in my original question. The reason for the icons not appearing seems to be a CSS/browser rendering issue because they appear in plain text but not in any of the nav menus. Apr 27, 2020 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.