I can't get my font-awesome icons to show up.

问题:

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 django project, the icons are showing up as little boxes. I know the css file is being recognized because when I comment it out the boxes go away. I think there may be something deeper going on with the css that I don't understand.

I suspect there's something going on in the main css file if someone could help me out. Thanks!

Here's the code from the template:

<ul class="special">
    <li><i class="fab fa-pencil" title="Edit"></i></li>
    <li><a href="#" class="icon fa-search"><span class="label">Magnifier</span></a></li>
    <li><a href="#" class="icon fa-tablet"><span class="label">Tablet</span></a></li>
    <li><a href="#" class="icon fa-flask"><span class="label">Flask</span></a></li>
    <li><a href="#" class="icon fa-cog"><span class="label">Cog?</span></a></li>
</ul>

Here's what I've imported:

 <link rel="stylesheet" type='text/css' href="{% static "css/main.css" %}" />
 <!-- <link rel="stylesheet" href="{% static "css/all.css" %}" > -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

回答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)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/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 shows square instead of icon when used directly in CSS

FontAwesome - Choosing the correct font-family in CSS pseudo-elements

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

回答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