html – Font Awesome icons are not working, I have included all required files – Stack Overflow

At first I couldn’t get this to work with Font Awesome 5:

<i class="fa fa-sort-down"></i>

That’s why I came here, being unfamiliar with font awesome. So when I looked further I noticed that my issue was merely an issue with the version.

w3schools helped me out in this case.

New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.

The s in fas stands for solid, and some icons also have a
regular mode, specified by using the prefix far.

I already noticed the different files in the FontAwesome css folder, like:

• all.min.css
• brands.min.css
• fontawesome.min.css
• regular.min.css
• solid.min.css

And that’s when I realized my mistake. All I had to do was include the appropriate css to the html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

And then reference the correct item:

<i class="fas fa-sort-down"></i>

This setup works for me. Though not all items have equivalents in each type. This will not work:

<i class="far fa-sort-down"></i>

As a side note, when you don’t want to reference all seperate files then this will suffice:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">