Glyphicons rendering as empty box

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


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

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>