Iconfont charachterspace crashes in Android (Fontastic)

Question

Ive used Fontastic.me to create the icon. It works great, with the exception of the built-in browser Android 4.2.2 and 4.3 (for example: modern Samsung tablets). In these browsers, the characters of the entire font do not have a width. This happens with every font created using Fontastic.me (even fonts that it itself is). This is a big problem when centering the icons (horizontal).

I set up a webpage to check it out: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html . Pink color indicates the width of the character. The following screenshot compares normal behavior with AndroidBrowser behavior: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png

I am sure because of Fontastic, because when I use Icomoon as a fontgenerator, the problem does not occur. I also notified the owner, but he says that he can not look into it, because now he does not know how to install the Android emulator on his Mac.

Does anyone know what is going on here? What makes character space collapse?

Answer 1

I had the same problem yesterday. I solved it with a little work. As you said, when you want to center the icon using text-align: center; it ends to the right. If you put it to the left, it aligns the left as intended. Thus, I made the speudo element exactly the same width as the icon, and centered the speudo element with the field: 0 auto; In this case, you can leave the text alignment to the left.

I know that this is not an ideal solution, but so far it works for me, and maybe for you.

Answer 2

I had the same problem and resolved it with icomoon .