Font Awesome not working in offline mode

Question

i am using font-awesome icons for publishing my HTML,CSS templates. They are working fine when i have the live link but when i download the CSS file and include that in my pages icon disappears.

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

Local Path : <link href="css/font-awesome.css" rel="stylesheet">

How can i use the font awesome in offline mode?

Answer 1

You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts :)

Answer 2

Could be a pathname problem Try:

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

Answer 3

I think you didn't download fonts or you used the wrong path. You can download the latest version font awesome at https://fontawesome.com/download. And don't forget check your path!

Hope this helps.

Answer 4

Did you embed FontAwesome font into your project? your structure must be like this:

[+]assets
    [+]css
        font-awesome.css
    [+]js
        demo-file.js
    [+]fonts
        fontawesome-webfont.eot
        fontawesome-webfont.svg
        fontawesome-webfont.ttf
        fontawesome-webfont.woff
        fontawesome-webfont.woff2
index.html
sample.html
whatever.html

after that, you can use FontAwesome locally.

Answer 5

In my case: If you have added something like this in your html (or any other font family with important using * selector), then this might be the cause your icons are not showing..

*{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }