Friday, June 1, 2018

Bootstrap Glyphicon Not Rendering ("empty box")

If you are not using a CDN link for the bootstrap library, you might find yourself in a situation where using glyphicon on your page might not work, and all you see is an empty box in place.

Glyphicon does not render

One reason for this could be because the paths for the fonts resource is not setup correctly.

If using the CDN link provided on the bootstrap website is not an option, then ensure that the directory looks like this -

Directory structure

Then, include the path to bootstrap.css in the HTML file.

Link to bootstrap.css in the html document

Reload the page in the browser, and that should load the glyphicon.