Some bootstrap glyphicons not loading

17,687

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.

Share:
17,687
Jonny
Author by

Jonny

Updated on June 20, 2022

Comments

  • Jonny
    Jonny almost 2 years

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