CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Pascal
Pascal

Reputation: 12885

Bootstrap 3 glyphicon is not displayed correctly

<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?

Upvotes: 0

Views: 517

Answers (2)

Pascal
Pascal

Reputation: 12885

oh dear... the answer is that the font works when I do this:

<i class="glyphicon glyphicon-export"></i>

instead of this:

<i class="glyphicon-export"></i>

one .glyphicon class was missing...

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

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>

Upvotes: 1

Related Questions