Why are Bootstrap 3 Glyphicons not displaying correctly?

SSolution 1: Check Font Files and Paths

Glyphicons use font files that must be correctly loaded by the browser.

Verify that the font files exist in the expected location relative to your CSS:

@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');
}

Common issues:

Files missing from the fonts/ folder.

Browser fails to load fonts due to mimetype issues (check in Chrome DevTools → Network tab).

Solution:2

-If you followed the highest rated answer and it’s still not working:

The Font folder MUST be on the same level as your CSS folder. Fixing the path in bootstrap.css will not work.

Bootstrap.css has to navigate to the Fonts folder exactly like this:

@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');
}