Bootstrap 3 Glyphicons are not working

Question

I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.

Answer 1

I was having the same issue and couldn't find any information about it except in the hidden comments on this page. My font files were loading just fine according to Chrome, but the icons weren't displaying properly. I'm making this an answer so it will hopefully help others.

Something was wrong with the font files that I downloaded from Bootstrap 3's customizer tool. To get the correct fonts, go to the Bootstrap homepage and download the full .zip file. Extract the four font files from there to your fonts directory and everything should work.

Answer 2

Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.

---

The font file isn't being loaded correctly. Check if the files are in their expected location.

@font-face {   font-family: 'Glyphicons Halflings';   src: url('../fonts/glyphicons-halflings-regular.eot');   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab: