Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

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

like image 794
Jonny Avatar asked Feb 01 '15 20:02

Jonny


People also ask

What can I use instead of Glyphicons?

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.

Can I use Glyphicons in bootstrap 4?

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.

How do I use Glyphicons in bootstrap 5?

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 are bootstrap Glyphicons stored?

Where to find Glyphicons? Associated CSS rules are present within bootstrap. css and bootstrap-min. css files within css folder of dist folder.


1 Answers

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.

like image 162
Jonny Avatar answered Oct 12 '22 12:10

Jonny