3

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Kenny Workman
  • 35
  • 1
  • 6
  • Are your font-awesome font files (woff, ttf) in the same directory as the CSS? Also you could try replacing e.g. `class="icon fa-search"` with `class="icon fa fa-search"` – elveti Jan 08 '19 at 08:41
  • 2
    Open your console and look for any red lines letting you know about the missing font files. `all.css` assumes the font files are there, with the same relative path as in what you downloaded from fontawesome website. – tao Jan 08 '19 at 08:44
  • Yes, they are in the same directory. Tried those modifications to no avail. – Kenny Workman Jan 08 '19 at 08:46

3 Answers3

3

You need to use the fas class and the pencil one will not show because it belong to the PRO package1 (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 package2 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:

enter image description here

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.

enter image description here

Related questions:

Font Awesome 5 on pseudo elements shows square instead of icon

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks! That seemed to do the trick to get them appear. Two of them have bizarre black lines running through them that disappear when the .js animation is activated... Any ideas what that is? – Kenny Workman Jan 08 '19 at 09:01
  • @KennyWorkman probably there is more CSS involved? can you create a fiddle with all your code? – Temani Afif Jan 08 '19 at 09:03
0

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">
xNaii
  • 111
  • 1
  • 5
0

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

Akinniyi Akinbode Bolade
  • 121
  • 1
  • 5
  • 16