font-awesome icons not showing up in Chrome 61

Question

I've downloaded font-awesome icons in my project and imported font-awesome.min.css as

<link rel="stylesheet" href="resources/font-awesome/css/font-awesome.min.css">

And used them simply like

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

• The stylesheet was loaded so there was no problem with the path.

• The icons worked fine in Firefox, but didn't show up in Chrome 61 at all, neither in Win 10 nor Linux, so I guess it has nothing to do with OS.

• I don't have any plugin in Chrome that would be conflicting.

• I've also tried <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> but nothing changed.

Does anyone know what might cause this problem? Thanks!

Answer 1

If you have any kind of AdBlock turned on, you need to disable it first. I also have the same problem that font-awesome icons appear in Firefox but not in Chrome, and I figured out that my Chrome AdBlock blocked it.

Answer 2

Forgot to mention, I'm using Polymer. And here is a solution I found.

1. install polymer-font-awesome with npm:

   npm i polymer-font-awesome

2. add the following dependency to polymer.json:

   "extraDependencies": ["node_modules/polymer-font-awesome/dist/fonts/*"]

3. import these two files:

   <link rel="import" href="node_modules/polymer-font-awesome/dist/font-face.html">
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-awesome.html">

4. include stlye module:

   <style type="text/css" include="font-awesome"></style>

Clear the cache in Chrome and it worked for me.

Answer 3

I'm having this exact same issue. I tried re-downloading the fonts and the css, rewriting my css into a new file, removing some of the scripts and tags in the head tag and nothing works. It seems to be related to Chrome 61. I was going to report this to the FA's github, but it looks like someone already did.