The font-awesome icon does not show up on Chrome

Question

I meet problem that fontawesome Icon does not show up on Chrome. ( Safari and Moz both works fine ). Does anyone have a clew why this happened. Thanks All.

Here is the Snapshot:

I know that the default font path that fontawesome.min.css directs ../font/......, but I have changed path name to " ../fonts/ " for my project, still doesn't work. The icon never shows up.

Answer 1

Just add brand.js, solid.js, fontawesome.js file from your fontawesome folder, it did work for me.

<script defer src="../fontawesome/js/brands.js"></script>
<script defer src="../fontawesome/js/solid.js"></script>
<script defer src="../fontawesome/js/fontawesome.js"></script>

Answer 2

Disable the plugin: "Font Changer with Google Web Fonts™" I guess it comes as a default tool.

Answer 3

You should disable adblocking plugins in chrome, they sometimes can mistake Fontawesome icons for advertising.

Answer 4

I just solved this problem on one of my own sites. Only some of the icons didn't work. fa-pencil and fa-trash, specifically, failed. fa-user-plus and fa-envelope worked fine.

I'm not sure precisely what was messing with it, but one of the other css files (maybe bootstrap) was messing with the FA css. I moved my link to the FA css so it came after the other css links in the page, and it worked. I now have pencil and trash icons.

Answer 5

Its because you need to provide the exact version of font awesome in the link tag of index.html . For me it was:

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
      crossorigin="anonymous">

you can also visit https://fontawesome.com/start and search for the exact version you need in your application

Answer 6

There must be multiple css files.. You should include all.min.css (or) all.css as it works well

Answer 7

I had a similar issue, and I resolved it with these steps:

1. Open your font-awesome.min.css file
2. Search for webfonts, which is the default parent folder name of the fonts. If you found a bunch, then replace each of them with the name of your fonts folder in your project.

...This way, the font references inside your ..min.css points to the correct directory path where your fonts are :)

I found out this out by opening chrome dev tools in incognito mode, and looking at the console errors.

Answer 8

Check if you have your Adblocker disabled. Sometimes chrome extensions can prevent the browser from showing the icons.

Answer 9

Is bootstrap working? It looks like your Css directory is capitalized which would cause your reference to the css file to not work.

Try replacing

./css/font-awesome.min.css

with

./Css/font-awesome.min.css

As mentioned in the comment on your original question, you could try using the CDN momentarily to see if the icon appears. If the icon does appear using the CDN, you know you have an issue with your path like I have mentioned above.

Here is the html code you would use for the CDN (version 3.2.1):

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Aside from this, you are also using an outdated version of font-awesome. If possible in your circumstance, I recommend upgrading to the latest version. You can find more information on the latest version by visiting the following link.

http://fontawesome.io/get-started/

If you are going to use the latest version, make sure to look at examples as they have changed the way you write the html code.

Edit after updating Font-awesome:

If you are going to use the latest version of font-awesome, you need to change the HTML code to

<i class="fa fa-times" aria-hidden="true"></i>

CDN for the latest version (4.7):

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">