0

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.

closed as off-topic by RRikesh, Fayaz, Krzysiek Dróżdż, Nathan Johnson, Christine Cooper Apr 8 '18 at 11:51

This question appears to be off-topic. The users who voted to close gave these specific reasons:

If this question can be reworded to fit the rules in the help center, please edit the question.

0

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.

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

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/

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