I tried searching but I can't seem to find a similar question so I am hoping that as an amateur, I am just making a big simple mistake.

What I want

I want to install Font Awesome to my WordPress theme and I want to do it locally.

Folder structure

This image is my folder structure:

enter image description here

What I tried

  1. I downloaded Font Aweesome 5.0.9 from the official website and followed their instructions. I placed the fontawesome-all.js file in /static/fontawesome and included this line of code in my header.php.

    <script defer src="/static/fontawesome/fontawesome-all.js"></script>
  2. I looked at a blog online and read another method. I took fontawesome.min.css and placed it in the CSS folder with the following line of code added to the header:

    <link rel="stylesheet" href="css/fontawesome.min.css">
  3. I then tried to create an action with the following code and it didn't work either.

    function add_font_awesome()
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'fontawesome', 
    get_template_directory_uri().'TestTheme/css/fontawesome.min.css' );
    add_action( 'wp_enqueue_scripts', 'add_font_awesome' );

Additional notes

For testing I shoved the following code in my main body and header but nothing ever appears.

<i class="fab fa-wordpress"></i>

I am unsure why this is not working, I believe I am probably making some crucial beginners mistake here but after reading multiple blogs and trying many different methods I have decided to try and ask for help.


Considering the folder structure "/public_html/wp-content/themes/TestTheme/static/fontawesome/" as folder location for Font Awesome use following instead

1 use following instead of the one you used for js include

<script defer src="<?php echo get_template_directory_uri(); ?>/static/fontawesome/fontawesome-all.js"></script>

2 use following instead of the one you used for CSS include having fontawesome.min.css file in the CSS folder

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>css/fontawesome.min.css">

The function get_template_directory_uri(), retrieve theme directory URI and can be used to include files located in the active theme.

3 or you can add the following code to your theme functions.php

add_action('wp_enqueue_scripts', 'test_theme_scripts_method');

 * Enqueue css and js with the correct path.
function test_theme_scripts_method() {

    // Enqueue css
    wp_enqueue_style( 'fontawesome_style', get_template_directory_uri() . '/css/fontawesome.min.css', array(), '5.0.9', 'all');

    // Enqueue js
    wp_enqueue_script( 'fontawesome_script', get_template_directory_uri() . '/static/fontawesome/fontawesome-all.js', array('jquery') );


The action "wp_enqueue_scripts" is used to enqueue CSS and JS files to site.

| improve this answer | |
  • This helped me, thank you, I accepted the answer and will learn from this! – Ruke Apr 6 '18 at 4:01

You can edit and try again.

function add_font_awesome(){
    wp_enqueue_style( 'style', get_stylesheet_uri() );

    //you need to edit this below line.
    wp_enqueue_style( 'fontawesome', 
         get_template_directory_uri() . '/css/fontawesome.min.css', array(), '5.0.9', 'all');
add_action( 'wp_enqueue_scripts', 'add_font_awesome' );

Read more: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

| improve this answer | |

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