Icons not shown in Android with optimizeLegibility

[ppcano]

Reported topcoat/topcoat#178

[tagliala]

Hi,

I'm not experiencing this issue. Can you provide a fiddle?

http://fontawesome.io/

<h4><i class="icon-pencil"></i> CSS Control</h4>

h4 has a text-rendering: optimizeLegibility inherited by BS

h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: 500;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}

I correctly see the pencil icon on my nexus 4 / 4.2.2 / chrome beta and opera 14:

[tagliala]

closing 'cause I didn't receive feedback

[znerd]

I had the same issue just now, with FontAwesome 3.2.1 while running a Cordova/PhoneGap application on the Android emulator with the built-in WebView (have not tried Chrome or Opera).

Using Android SDK Tools 22.0.1, Android SDK Platform Tools 17 on OS X 10.8.4, Android 4.2.2 (API 17).

Fixed by removing the CSS rule.

[tagliala]

@znerd what is the suggested fix?

[znerd]

I don't think this is a problem with FontAwesome 3.2.1 itself, but rather with projects that use FontAwesome and then apply the text-rendering: optimizelegibility; rule in their CSS somewhere, causing that to be applied to FontAwesome icons.

Note that Safari 6, Chrome 28.0, Firefox 20 on OS X and iOS 6.1 do not expose this problem, only Android (in the 4.2.2 simulator).

So rather than this being a bug, it makes more sense to qualify this only as an FAQ.

A possible solution in a PhoneGap project is to apply that style only to the iOS version of the app and not to the Android version.

If you do want to avoid this problem, there is something you can do in the FontAwesome project, though, I suspect. Just add a single rule: text-rendering: auto; for all icons. Then you probably avoid any unexpected problems altogether.

[tagliala]

This is probably a dup of #862 and I didn't noticed