I can't get my font-awesome icons to show up. Tried importing css with multiple methods. Using html template

Question

I\'m building a website portfolio using a HTML template. I don\'t have too much experience with css, but after importing the font-awesome css file both as a link and file in

Answer 1

Put it on top of all css and try to use without integrity and crossorigin parameters because even a little change by devs on file may not match with integrity and crossorigin you have on your website so it won't be used.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

Answer 2

You need to use the fas class and the pencil one will not show because it belong to the PRO package¹ (https://fontawesome.com/icons/pencil?style=solid)

ul a {
  text-decoration:none;
  font-size:25px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
  <li><i class="fas fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="fas fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="fas fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="fas fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="fas fa-cog"><span class="label">Cog?</span></a></li>
</ul>

You cannot use the regular version of these icons far because all of them belong to the PRO package² so they won't show

ul a {
  text-decoration:none;
  font-size:25px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
  <li><i class="far fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="far fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="far fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="far fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="far fa-cog"><span class="label">Cog?</span></a></li>
</ul>

https://fontawesome.com/icons/tablet?style=regular

https://fontawesome.com/icons/search?style=regular

https://fontawesome.com/icons/flask?style=regular

https://fontawesome.com/icons/cog?style=regular

---

1 As you can see below, all the versions of this icon are PRO so there is no way to use this icon with the Free package:

2 As you can see below, only the solid version isn't PRO so only this one is included in the Free package unlike the 2 others.

Related questions:

Font Awesome 5 on pseudo elements shows square instead of icon

Font Awesome 5 Choosing the correct font-family in pseudo-elements

Answer 3

Keep the fontawesome files in your local directory (asset/fontawesome) Then Load fontawesome with static

<link rel="stylesheet" href="{% static 'css/font-awesome.min.css'%}">

You can check this github repo here