Including Font Awesome in a Custom Theme

Question

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.

Answer 1

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.