Browsers are not requesting font file

Question

I'm having a really weird issue with font-awesome.

Long story short: browsers are ignoring 'src' part of @font-face and not making any requests for the actual font.

//font-awesome.css excerpt

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

• All the software and libraries are of latest stable version.
• No errors in console.
• Font files are perfectly downloadable when requested directly
• Tested in Chrome, FireFox and IE
• Another my project that uses previous major versions of bootstrap and font-awesome works fine

http://jsfiddle.net/c2zUh

Answer 1

Your HTML is not referencing the base class of the icons (to set the font). You need to include the base class and then the icon i.e.

<span class="glyphicon glyphicon-asterisk"></span> 

not

<span class="glyphicon-asterisk"></span>

and

<i class="fa fa-group"></i>

not

<i class="fa-group"></i>

you need the glyphicon and fa classes as well

and as a note, It appears that if you do not use the font in a style rule (the @font-face doesn't count) that is actually applied to an element, it is not requested. So unless an element had a glyphicon or fa class the relevant font files would not be downloaded. I must admit, that's news to me.