Twitter Bootstrap icons and Opera Mobile :(

Question

Why icons of Twitter Bootstrap don't displays in Opera Mobile browsers? How to solve the problem? enter image description here

Yep it will be helpful for us to track down the issue if you provide details about: a) Which version of bootstrap you are using? b) Which version of opera? c) Which device you found this issue? And also provide us demo url which replicates the issue so we can test it properly. — Syed, Mar 17 '14 at 14:15

score 1 · Answer 1 · answered Mar 17 '14 at 14:13

1

Opera Mini doesn't support Web fonts in the first place:

Can I use @font-face Web fonts?:

Version | Opera Mini
-------------------------------------------
Current | 5.0-7.0 [Not Supported (= Red)]

answered Mar 17 '14 at 14:13

cvrebert

9,075
2
38
49

score 0 · Answer 2 · answered Feb 14 '14 at 07:46

0

The HTML file could have a different char set defined. You could try to view it with a different encoding, such as UTF-8.

If the charset is UTF-8 the undisplayed character could be from some other encoding that UTF-8 does not support.

answered Feb 14 '14 at 07:46

Creative Magic

3,143
3
28
47

1

What is the undisplayed character? Can you type it here? If not, can you provide a char code for it? – Creative Magic Feb 14 '14 at 07:57
Try accessing the page in a normal browser and see what the undisplayed character is. – Creative Magic Feb 14 '14 at 08:11
Opera Mobile it's not normal browser? :) In desktop Opera all displays. – Bohdan Vorona Feb 14 '14 at 08:51
I meant a non-mobile version of your favorite browser. No holy-war was intended. – Creative Magic Feb 14 '14 at 09:20
In non-mobile Opera (and other browsers) all okay. – Bohdan Vorona Feb 14 '14 at 09:24
Problems with it .icon-chevron-right:before { content: "\f054"; } I changed content: "\f054"; on content: "a"; and all works... – Bohdan Vorona Feb 14 '14 at 09:32
As I've said, the browser doesn't recognize that character. Either try to use a different char or use image icon instead. – Creative Magic Feb 14 '14 at 09:52
Yes, maybe it's true :( But I use Twitter Bootstrap with their own icons :( – Bohdan Vorona Feb 14 '14 at 09:59

Pellmellism · Answer 3 · 2014-02-14T08:44:13.523

0

its possible your using a CDN (content delivery network) to link to your bootstrap css file...and if you are, then maybe your using an old out of date one. Check to be sure your link is current. One of the advantages of not using a hosted dependency is not having that problem n the future.

currently, try this -> //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

according to your comment about the code you are using, your not using bootstrap icons, your uing font awesome icons...add this to your code

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

that should do it

Source - http://fortawesome.github.io/Font-Awesome/3.2.1/icon/globe/

and also source for implementation instructions

http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/

edited Feb 14 '14 at 08:44

answered Feb 14 '14 at 07:49

Pellmellism

380
1
11

Thanks, but it did not help: ( – Bohdan Vorona Feb 14 '14 at 07:53
– Bohdan Vorona Feb 14 '14 at 08:06
there, try that - I adjusted the answer according to your code – Pellmellism Feb 14 '14 at 08:45
Problems with it .icon-chevron-right:before { content: "\f054"; } I changed content: "\f054"; on content: "a"; and all works... – Bohdan Vorona Feb 14 '14 at 09:31

score 0 · Answer 4 · answered Feb 25 '14 at 04:10

The device you are testing with might not have that icon available in its built-in character set. Each device has a font set which it can draw, if you use a character outside that range, it shows some default icon like a square or question mark upside down.

There's not much you can do about the fact that a device doesn't support extended characters in the UTF8 encoding.
You could use a supported character instead, or an image rather. There might be something in the device's accept headers that will give away that it doesn't have all the characters. Otherwise, you have to build up a list of devices by user-agent that has or doesn't have the characters you need and give the appropriate output where applicable.

One library that might help with this is the WURFL device database has a capability called xhtml_preferred_charset which is a string that says if

UTF-8 should be supported by default, but some devices have problems. Here you may find alternative charsets such as iso8859. This field does not present the exact charset because with ISO charsets you may need to specify the one of your region (1, 15, other)

See http://wurfl.sourceforge.net/help_doc.php

Twitter Bootstrap icons and Opera Mobile :(

4 Answers4

Linked