I have a WordPress theme that I'm building with Bootstrap Sass source. The styles are working, but most of the glyphicons aren't (only asterisk and plus). I'm compiling my Bootstrap to the style.css
and relative to that, there is a folder called fonts
which holds the glyphicons (I set the $icon-font-path: "fonts/";
) Here is a snippet from my compiled style.css
to show that the fonts path is correct:
@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.woff2") format("woff2"), 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"); }
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
For e.g, these work:
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
But these don't:
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
Here's a snippet of the glyphicon classes:
.glyphicon-asterisk:before { content: "\2a"; }
.glyphicon-plus:before { content: "\2b"; }
.glyphicon-star:before { content: \e006; }
.glyphicon-thumbs-up:before { content: \e125; }
I checked the network tab to see if it was loading the glyphicon fonts, and they only appear when the glyphicons work (asterisk, plus). Otherwise, the font file isn't even shown in the network tab (not even a 404
).
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. Bootstrap 4 also switch from Less to Sass so you might integrate the font's Sass (SCSS) into your build process, to create a single CSS file for your projects.
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.
In lines 15 and 17 the <span> and <a> element has the bootstrap glyphicon glyphicon-pencil classes, so to use any glyphicon in bootstrap: Use the <span> or <a> element. Set the class attribute of the <span> or <a> element as glyphicon then a space and then glyphicon-iconname.
Where to find Glyphicons? Associated CSS rules are present within bootstrap. css and bootstrap-min. css files within css folder of dist folder.
The issue was that the content values were not wrapped in quotes. This is still an issue with the www.getbootstrap.com sass source download, but was recently fixed in the bootstrap-sass github repo.
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