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>