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>