Bootstrap 3 glyphicon is not displayed correctly

advertisements
<a class="btn btn-default" id="exportdata" href="#"><i class="glyphicon-export"></i></a>

On Chrome 34 the glyphicon shows a "square"

On IE 11 the glyphicon shows nothing

On FF 28 the glyphicon shows an odd icon with numbers/chars it looks broken...

What is wrong with my hyperlink?

I know there are similar/same problems on SO. But they did not help me.

For example this one: Twitter Bootstrap 3 Glyphicons error

Where is this security.yml file? Its not in my fonts folder!

I get this in my chrome console:

Resource interpreted as Font but transferred with MIME type font/x-woff: "http://localhost:5264/fonts/fontawesome-webfont.woff?v=4.0.3".

Why interpreted as Font? Do I have to set something in IIS?


Try to set on ISS the correct MIME type for woff resources using:

  <staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>