I have a WordPress theme that I create with Bootstrap Sass source. Styles work, but most glyphics are not (only an asterisk and plus). I am compiling my Bootstrap in style.css and regarding this, there is a folder called fonts that contains glyphics (I set $icon-font-path: "fonts/"; ). Here is a snippet from my compiled style.css to show what the correct style.css path is:
@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 example, these works:
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
But this is not so:
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
Here is a snippet of 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 glyphicon fonts load, and they only appear when glyphics are working (asterisk, plus). Otherwise, the font file does not even appear on the network tab (not even 404 ).
Jonny source share