Glyphicons rendering as empty box

Glyphicons rendering as empty box

I’m using the excellent Twitter bootstrap library with Glyphicons, however all the icons are rendering as empty squares, like so:

I’ve uploaded the Glyphicons fonts to my web root and changed the bootstrap.css file to point to their correct locations, which I’ve verified because they have 200 OK requests in Chrome’s dev tools:

This is the markup I’m using:
Download to Computer

Any ideas why the font may be rendering as empty boxes? Previous answers on StackOverflow all point to incorrect paths to the fonts, which isn’t the case here as the paths are correct.

Solutions/Answers:

Solution 1:

Not really a solution, but I ended up just using the Bootstrap CDN: http://www.bootstrapcdn.com/

Solution 2:

I was having the same problem and I was able to solve it!

  • In IIS, I set the Mime Types for woff and woff2 as follows:

    .woff application/x-font-woff
    .woff2 application/font-woff2
    
  • In the CSS for my page, I created a loaded the font from the bootstrap Glyphicon download for woff and woff2:

    @font-face {
      font-family: 'Glyphs';
      src:  url('/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
            url('/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff');
    }
    
  • In the CSS, I created a class for glyphicons and specified to use the above font that I titled “Glyphs”:

    .glyphicon {
        font-family: 'Glyphs', sans-serif;
    }
    
  • Anywhere I wanted to display a glyphicon, I specified by glyphicon class then the typically bootstrap glyphicon class:

    <span class='glyphicon glyphicon-home'></span>
    

Solution 3:

Place the fonts folder in your css directory
It should go like

css/fonts/**.svg
css/fonts/**.woff

Solution 4:

This can also happen if you haven’t specified both classes (i.e. only “glyphicon-star” instead of “glyphicon glyphicon-star”)

Good:

<i class="glyphicon glyphicon-star">

Bad

<i class="glyphicon">

Solution 5:

Acording to Glyphicons team, this is a bug in WebKit:

WebKit CSS content Unicode bug?

But I don’t undertend why an older version of Chrome render this. I have posted here the versions, but one moderator deleted my answer.

Solution 6:

for me it’s this markup that works … just the icon class definitions that are different:

<a href="http://www.mysite.com/download" class="btn btn-primary">
    <span class="glyphicons star"></span> 
    Download to Computer
</a>

References

Related:  Can't make the validation work in Bootstrap 4