Some bootstrap glyphicons not loading

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:

Read More
<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).

Related posts

Leave a Reply

1 comment