Bootstrap 3 glyphicon is not displayed correctly

Question

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

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?

Could you please have a look at my answer on Bootstrap glyphicon not showing in Form? — Murat Yıldız
– Murat Yıldız, Commented Apr 24, 2016 at 20:55

Irvin Dominin · Accepted Answer · 2014-04-19 22:34:46Z

1

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>

answered Apr 19, 2014 at 22:34

31k9 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The error message in chrome console is gone but still the icon does not show correctly :/

Pascal · Accepted Answer · 2014-04-22 11:26:38Z

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