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>
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)
<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 package2 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
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">
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
来源：https://stackoverflow.com/questions/54087985/i-cant-get-my-font-awesome-icons-to-show-up-tried-importing-css-with-multiple