Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap glyphicons show wrong icon

I have seen this happen while developing my site, sometimes my glyphicons don't render correctly and show different icons. I have recently got some reports of my shopping cart and search button showing up as a hammer and lips. I am using bootstrap v3.3.4 and have the fonts stored on my server with an absolute path. I have seen this happen in FireFox and just got a mobile report in Safari. Anyone ever have this issue or maybe an idea why it happens?

enter image description here

I am going to add that when I remember seeing this I refreshed the page or cleared my cache and it fixed the problem. But my client wants a better answer than it just happens refresh the page.

like image 243
Drew Avatar asked May 14 '15 16:05

Drew


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 5?

Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

How do I use Glyphicon icons 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.

Why is the Glyphicons used in Bootstrap 4?

Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons. Some Glyphicons like Home icon, User icon, Lock icon, etc. Generally, Glyphicons are icon fonts which you can use in your web projects.


1 Answers

I had a similar issue with a project I was working on. My understanding is that the platforms own icons/emojis are taking prefrence over your own because they share the same names. As a work around I changed my naming convention with an obscure prefix. Been trouble free ever since. If you are like me and weren't sure how to go about this I used Fontastic Me Font Icon Maker as a starting point. Hope this helps :)

like image 141
Nathwales Avatar answered Oct 23 '22 03:10

Nathwales