Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3.0.3 glyphicons displaying emoticons on iOS 7

I use Bootstrap 3.0.3 glyphicons. All is ok on desktop browsers and on Android devices. My problem is about Apple devices (tested on iPhone and iPad running iOS7).

The glyphicons look like emoticons. I've found some issues but not answering my problem.

Here is the link to view the screenshot : http://www.fredericblancheton.fr/imgdisallow/image.png

Thank you for your help.

like image 338
fredb Avatar asked Jan 02 '14 09:01

fredb


People also ask

How do I use Glyphicons in Bootstrap 3?

Bootstrap 3 Glyphicons are actually fonts, so you can scale them and color them as you please. Bootstrap previously used image sprites for icons. To add a glyphicon, add a <span> tag with Bootstrap's . glyphicon class and also the class for the specific glyphicon that you require.

Does bootstrap 5 support Glyphicons?

Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.

What is the main usage of Glyphicons in bootstrap?

Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.

How do I create a custom Glyphicon in bootstrap?

For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set. When you are finished export the font set and load it as you would any icon font. Good luck! If your imported SVG file icons seem misaligned after importing into the iconmoom.


1 Answers

I had a similar problem, but only when another font was included via font-face inside the stylesheet. It seems that mobile safari or safari in general has a very short timeout for loading fonts which are included via font-face syntax.

I had to remove the font from the main stylesheet and add the font-face syntax directly in the sites header using <style></style> syntax. Weird.

Another approach is illustrated over at filamentgroup, which are using the Data-URI syntax for the font and loading these asynchronously via javascript. This should also trick the browser to wait longer. -> http://www.filamentgroup.com/lab/font-loading.html

like image 148
Roman Avatar answered Nov 04 '22 04:11

Roman