Iconfont charachterspace collapses in Android (Fontastic)

Question

I’ve used Fontastic.me to create an iconfont. It works great except in the native browser of Android 4.2.2 and 4.3 (eg: modern Samsung tablets). In these browsers, the characters of the entire font have no width. This occurs with every font made with Fontastic.me (even the fonts it supplies itself). This is a major problem when centering the icons (horizontally).

I've set up a webpage to test it: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html. The pink color shows the width of the character. The following screenshot compares the normal behaviour with the AndroidBrowser-behaviour : http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png

I’m sure it’s because of the Fontastic, because when i use Icomoon as fontgenerator, the problem doesn’t occur. I've also notified the owner but he says he can't look into it because he doesn't now how to install an Android Emulator on his Mac.

Does anyone has a clue to what's happening here? What causes the character-space to collapse?

Answer 1

I had the same problem yesterday. I resolved it with a little bit of a work around. Like you said, when you want to center the icon with text-align:center; it ends up more to the right. If you put it to the left, it aligns left as intended. So I made the speudo element exactly the same width as the icon and centered the speudo element with margin: 0 auto; In that case you can leave the text-align to the left.

I know it's not the perfect solution, but for now it works for me and maybe also for you.

Answer 2

I had the same problem and resolved it by using icomoon.