Font Awesome not working in offline mode

12
votes

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?

5
htmlcssfont-awesomeoffline
Just download that css, and include in header :) fortawesome.github.io/Font-Awesome/assets/… and check path to css.. :) – Matej Đaković
open netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css and see how to connect the font. Where you is the font? – Dmitriy
@Dmitriy thanx i have included the font folder and it is working fine know :) – Mehar

5 Answers

17
votes

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.

7
votes

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 :)

3
votes

Could be a pathname problem Try:

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

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.

0
votes

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;
 }