CODEWITHSUNDEEP
htmlcssfont-awesome
Learning
Learning

Reputation: 20001

Font Awesome not showing on my localhost

I am using font awesome on webpage and non of the following is working on my local system

<a href="#header" class="fa fa-angle-down"></a>
<a href="#header" class="fa fa-arrow-circle-o-down" style="font-size:24px"></a>

Same code works on fiddle but not the local host

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

http://jsfiddle.net/ZF7x4/33/

http://fontawesome.io/icon/arrow-circle-o-down/

I am not sure why it is not working i tried few thing but it is not working

UPDATE:

While trouble shooting further i noticed it only shows following css in localhost

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: inherit;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
}
.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

And rest of which is visible on fiddle is not showing in localhost. Not sure why while i am using same cdn link

.fa-angle-down::before {
    content: "";
}
.fa-angle-down::before {
    content: "";
}

UPDATE 2:

Issue seems to be only with anchor when i use same for <i class="fa fa-angle-down"></i> it works why?

Upvotes: 8

Views: 14824

Answers (7)

arey anjineyulu
arey anjineyulu

Reputation: 1

I had the same problem.

I got that working by simply changing the address in href attribute of my html file.

Before I gave the location of css file w.r.t to my current html file(index.html) as my index.html and fontawesome folder were in same folder(Hospital Inventory).

<link rel="stylesheet" type="text/css" href="\fontawesome\css\all.css">

then I gave it w.r.t to the localhost and it worked...

<link rel="stylesheet" type="text/css" href="\Hospital inventory\fontawesome\css\all.css">

Upvotes: 0

jerryurenaa
jerryurenaa

Reputation: 4704

The issue is because since font awesome 5 and up you you also need to include some other files.

2 solutions

1- use the web CDM

2- add all other folders to the localhost directory and it will work instantly

I hope it helps

Upvotes: 0

Andile
Andile

Reputation: 11

Make use of the console on your browser inspect, option from there you will be able to see which file are not found, it might be the fonts,ttf file, download that file from github place it on the directory that it was try to load it from that should work

Upvotes: 1

Ray
Ray

Reputation: 21

For my case, 

<i class="fas fa-google"></i>

was not working, I found out that to make it work I, need to use it as

<i class="fab fa-google"></i>

Upvotes: 1

Mr.Pandya
Mr.Pandya

Reputation: 2038

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
    <body>


        <a href="#header" class="fa fa-angle-down" style="font-size:24px"></a>
        <br/>
        <br/>
        <a href="#header" class="fa fa-arrow-circle-o-down" style="font-size:24px"></a>
    </body>
</html>

Upvotes: 0

user9422949
user9422949

Reputation: 23

i also faced the same problem. my css cdns were loading good but script cdns were not loading. what you do is when ever you type your localhost address in url box of browser do following:

http://localhost:<port>/

this worked for me. Hope that it will help you.

Upvotes: 0

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

Check whether you are declaring for UTF-8 in your document?

<meta charset="UTF-8">

or

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

You can also use the below link,

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

Also you can try this in your css,

 @font-face {
      font-family: 'FontAwesome';
      src: url('../font/fontawesome-webfont.eot');
    }

Upvotes: 1

Related Questions