FontAwesome icons not showing on web url

Question

I have design a website in HTML and used FontAwesome icon. When I run the website on localhost, icon showing fine. But on url it not working. Here the url : Demo

here is my Custom CSS:

@font-face{
        font-family:'FontAwesome';
        src:url('../font/fontawesome-webfont.eot@v=3.2.1');
        src:url('../font/fontawesome-webfont.eot@#iefix&v=3.2.1') 
        format('embedded-opentype'),url('../font/fontawesome-webfont.woff@v=3.2.1') 
        format('woff'),url('../font/fontawesome-webfont.ttf@v=3.2.1') 
        format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
        format('svg');font-weight:normal;font-style:normal;
}

AND

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}

AND

.icon-envelope-alt:before{content:"\f003";}
.icon-heart:before{content:"\f004";}
.icon-star:before{content:"\f005";}
.icon-star-empty:before{content:"\f006";}
.icon-user:before{content:"\f007";}
.icon-film:before{content:"\f008";}
.icon-th-large:before{content:"\f009";}
.icon-th:before{content:"\f00a";}
.icon-th-list:before{content:"\f00b";}
.icon-ok:before{content:"\f00c";}
.icon-remove:before{content:"\f00d";}
.icon-zoom-in:before{content:"\f00e";}
.icon-zoom-out:before{content:"\f010";}
.icon-power-off:before,.icon-off:before{content:"\f011";}
.icon-signal:before{content:"\f012";}

Anyone help me to fix this.

Thanking you.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Dec 10 '15 at 11:58

score 2 · Answer 1 · answered Aug 25 '18 at 10:15

I know this is been asked a while , but may this answer help:

This is a server configuration: you should add this in the web.config

    <system.webServer>
    <staticContent>
      <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

Full reference here

score 1 · Answer 2 · answered Dec 10 '15 at 12:08

1

You must include the stylesheet of FontAwesome inside the tag head

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

Then, you use in the menu:

<span class="icon-angle-down" style="color: rgb(51, 51, 51);"></span>

The correct version is:

<i class="fa fa-angle-down" style="color: rgb(51, 51, 51);"></span>

answered Dec 10 '15 at 12:08

pedrodj46

161
8

I have use custom css i.e element on before, that's why I use span like that – Daniel Smith Dec 10 '15 at 12:12
Ah ok, I don't know this particular. So, the problem is that the files aren't in the correct position in the server – pedrodj46 Dec 10 '15 at 13:54

score 0 · Answer 3 · answered Dec 10 '15 at 12:55

We are unable to find the font on the path: http://qubedns.co.in/codes/design/font/fontawesome-webfont.eot@v=3.2.1

This webpage is not available

DNS_PROBE_FINISHED_NO_INTERNET

Which is the path you are using on your code

@font-face{
        font-family:'FontAwesome';
        src:url('../font/fontawesome-webfont.eot@v=3.2.1');
        src:url('../font/fontawesome-webfont.eot@#iefix&v=3.2.1') 
        format('embedded-opentype'),url('../font/fontawesome-webfont.woff@v=3.2.1') 
        format('woff'),url('../font/fontawesome-webfont.ttf@v=3.2.1') 
        format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
        format('svg');font-weight:normal;font-style:normal;
}

FontAwesome icons not showing on web url

3 Answers3