Font-awesome 5 not working

Question

I decided it was time for me to switch to Font-awesome 5 when I ran into a problem. My icons are not shown. It shows me this.

I don't get where the problem occurs. I followed every step on their site and linked the files correctly but they still dont show. Here is a screenshot of the file.

What is causing this? Why doesn't it work?

Answer 1

lets add all.min.css to css directory then link it

<link rel="stylesheet" href="/css/all.min.css">

and make webfonts directory beside all the main folders

Answer 2

An simple solution.

1. Download the files from #fontawesome for #web

2. Your html

3. Your browser screen

Answer 3

I had the same problem. I had a directory called fontawesome into which I put fontawesome-all.css and the webfonts directory.

I simply changed it to placing the directory structure by adding a subdirectory css, moving the .css file to it and changing the link to include the subdirectory.

Works perfectly now.

Answer 4

I see that you're getting the .CSS from /fontawesome. FA will then try to load its fonts from /webfonts - I assume this does not exist.

I'd recommend to stick with FA's folder-structure. Move the .CSS to /fontawesome/css and make sure you copy the webfonts-with-css/webfonts-folder into /fontawesome/webfonts.

Answer 5

your problem is 'fa' and not 'fas'

<i class="fa fa-camera-retro fa-10x" ></i>

Answer 6

You can use cdn link for fontawsome,its a better way. Please see the below code, it may help you

<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<i class="fa fa-camera-retro fa-10x" ></i>

Answer 7

it's <i class="fa fa-camera-retro fa-10x" ></i> not <i class="fas fa-camera-retro fa-10x" ></i> </pre>

Answer 8

Try to use the absolute path by adding another / in the start of your import methods.

Are you sure that you only need to import the minified css? You might need to import the fonts too.

The error on your console shows that the problem you're facing is import related.