Font Awesome not showing on my localhost

Question

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?

Answer 1

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