Question

I am using Font Awesome, which was designed for use with Twitter Bootsrap.

The Android (version 2.1) browser on the Galaxy S (Model # GT-I9000M) phone does not display the icons. It shows them as vertical rectangles, similar to what you see here:

Does anybody know a fix to this problem?

Answer 1

Here is the across the board support for @font-face: http://caniuse.com/fontface

2.1 browser simply doesn’t support it, and it’s not properly supported until 4.0. 2.2-3 partial support refers to the use of local(), which isn’t supported at all. Font will not work at all on the stock Android browser if you are trying to source local fonts or using it to force user to download yours (smiley face hack).

Edit: How to know if a font (@font-face) has already been loaded? You can use this jQuery plugin to detect if Font-Awesome has loaded. If it hasn’t (either due to bad font file or due to lack of support by the phone) then you can add a class which adds a background image (of the icon) to the div/span/whatever (can’t be the <i> tag) that the icon has been applied to.

You can see a demo here.