15

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.

Ram
  • 3,092
  • 10
  • 40
  • 56
Drew
  • 524
  • 2
  • 7
  • 21
  • I'm not sure why this happens but you could try removing the hammer and lips from the glyphicons directory on your server. – one2three May 14 '15 at 16:45
  • 2
    So, the hammer and lips you're seeing aren't valid bootstrap icons, they're emojis. I found [this issue](https://github.com/twbs/bootstrap/issues/13488) but I'm not sure how to guide you further. Does this issue only pop-up on Apple devices? – Tony May 14 '15 at 16:49
  • There may be an answer [here](http://stackoverflow.com/questions/20879432/bootstrap-3-0-3-glyphicons-displaying-emoticons-on-ios-7) as well (see comments). – Tony May 14 '15 at 16:51
  • This happened on an iphone 5 in safari and happened on windows in FireFox. – Drew May 14 '15 at 17:05
  • Why you don't try a css trace in FireFox? – Imran Sh Oct 06 '15 at 05:52
  • If glyficon icons is inconsistent at the moment, then use font awesome icons for quick fix. It seems your issue is quite strange. – Jinu Kurian Nov 15 '15 at 02:40

3 Answers3

2

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

AJPerez
  • 3,435
  • 10
  • 61
  • 91
Nathwales
  • 118
  • 1
  • 12
1

Here is the my solution: In _variables.scss (or css) find the line with icon font path:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../../fonts/bootstrap/") !default;

In my case, the problem was in the wrong path to fonts/bootstrap (the glyphicons are here). To fix the problem just remove one "../" from there. Your code should be something like this:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

Hope it helps.

Roman Reznikov
  • 11
  • 1
  • This was my issue. I installed bootstrap using bower, modified bootstrap.less and variable.less and created a site.less file to combine and import them in to site.css, the issue is the "../font/" in variable.less is compiled inside glyphicons.less to /bower_components/bootstrap/fonts/glyphicons-halflings-regular.woff2, which didn't work when I deployed it because the bower folder isn't deployed. – Anthony Feb 02 '17 at 21:23
  • https://github.com/twbs/bootstrap/issues/13488 For more options and information... – Zvi Redler May 03 '18 at 10:26
1

(Putting this here for anyone searching in future, highlighting the answer in the link posted by Tony in a comment to the original question.)

If you're using an ad blocker on iOS, you will see this issue - emoji replacing the glyphicons (e.g. monkey face replaces calendar). I don't have a solution other than disabling the ad blocker.

BTW a similar thing happens with font-awesome but instead of showing emoji, the icons just don't appear. This is not great but definitely better!

coco9nyc
  • 71
  • 2
  • 3