Bootstrap v3.3.4 Glyphicons displaying Emoji on mobile/iPhone

I had a small problem yesterday when I was upgrading from Bootstrap 2.3 to Bootstrap 3 on one of my rails applications. All was okay on my laptop, icons were loading without a problem but later when I checked my site on a mobile device I saw that the Glyphicons were showing up as Emojis. It wasn’t just my device, I asked my friends to have a look and to their amusement they seemed to have the same issue. The fix? When upgrading to Bootstrap 3 I needed to change the paths of the fonts/glyphicons locations. So we had:

@font-face {

  font-family: ‘Glyphicons Halflings’;

  src: url(‘../fonts/gyphicons-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’);

}

I had to change the path ../fonts/ to ./assets/ but I only changed the first couple, not all of them (as it was on one line in my editor I didn’t see them all). So by changing all the paths to the correct ./assets/ path the issue was resolved.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s