I can't seem to install Font Awesome locally [closed]

Question

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:

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.

Answer 1

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.

Answer 2

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/