Menu
I'm using the excellent Twitter bootstrap library with Glyphicons, however all the icons are rendering as empty squares, like so:
I've uploaded the Glyphicons fonts to my web root and changed the bootstrap.css file to point to their correct locations, which I've verified because they have 200 OK requests in Chrome's dev tools:
This is the markup I'm using:
<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>
Any ideas why the font may be rendering as empty boxes? Previous answers on StackOverflow all point to incorrect paths to the fonts, which isn't the case here as the paths are correct.
821
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.
The Glyphicons are a set of symbols and icons to understand more effectively and easily in web projects. The Glyphicons are used for some texts, forms, buttons, navigation, and etc. The bootstrap has many Glphyicons but there has a standard format to display icons.
Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.
Bootstrap Glyphicons provides a number of icons. Choose one of them and add the name of the icon class to any HTML element within the < body > tag.
Glyphicons are basically little symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage. They're implemented in Bootstrap as an icon font — a custom font that contains these glyphs instead of letters. If you're creating a site based on Bootstrap 3.3.7,...
<span class="glyphicon glyphicon-home"></span> = The first class—glyphicon—is a base class. It tells the <span> tag, "hey, heads up: this is going to be an icon.". The second class (in this example, glyphicon-home) points the specific icon you want to use. This one is an icon of a house!
To use this cheat sheet, simply find the glyphicon you want to use and click the copy button. This will add the complete HTML code for that glyphicon (span tag and all) to your clipboard, ready to paste into your web development tool of choice.
The glyphicons you see in Bootstrap are part of a set called Glyphicons Halflings and were created by the very talented Jan Kovařík over at GLYPHICONS.
Not really a solution, but I ended up just using the Bootstrap CDN: http://www.bootstrapcdn.com/
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
