I Can't Get My Font-awesome Icons To Show Up. Tried Importing Css With Multiple Methods

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 my djang

Solution 1:

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)

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

<linkhref="https://use.fontawesome.com/releases/v5.13.0/css/all.css"><ulclass="special"><li><iclass="fas fa-pencil"title="Edit"></i></li><li><ahref="#"class="fas fa-search"><spanclass="label">Magnifier</span></a></li><li><ahref="#"class="fas fa-tablet"><spanclass="label">Tablet</span></a></li><li><ahref="#"class="fas fa-flask"><spanclass="label">Flask</span></a></li><li><ahref="#"class="fas fa-cog"><spanclass="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

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

<linkhref="https://use.fontawesome.com/releases/v5.13.0/css/all.css"><ulclass="special"><li><iclass="far fa-pencil"title="Edit"></i></li><li><ahref="#"class="far fa-search"><spanclass="label">Magnifier</span></a></li><li><ahref="#"class="far fa-tablet"><spanclass="label">Tablet</span></a></li><li><ahref="#"class="far fa-flask"><spanclass="label">Flask</span></a></li><li><ahref="#"class="far fa-cog"><spanclass="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

Solution 2:

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">

Solution 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