Discussion on the problems encountered by Iconfont in mobile terminal

Iconfont more and more get the front end of the concern, especially Ali that Iconfont library of the introduction and continuous improvement, coupled with even IE6 can be compatible, is indeed a good thing.

Now that the fire, our company mobile Project also plans to join this iconfont, so I have to our own project to do a test, mainly in favor of the mobile side of the browser. During the demo test, a compatibility problem was found: Iconfont in most Android browsers as a question mark + diamond?

Please see the test demo

At first, since IE6 are compatible, these WebKit browsers should not be a problem. The demo Iconfont from Ali mother Mux Online generation, official website http://iconfont.cn/, including Taobao icon Library and Ali Mother icon Library. There are also many other excellent iconfont libraries, such as Icomoon Fontello glyphicons

First, let's look at two ways to insert Iconfont.

First, insert directly into HTML

<i class= "Iconfont" >3</i>

This type of insertion in the compatibility test for the moment did not find any problems, see the above demo comparison found that most of the mobile browsers can be normal display, but opera classic browser and opera Mini browser are not normal display (iOS and Android are), seemingly not support? Opera is OK on the PC side.

The second way is to insert the content property of the CSS

. icon-weibo:before {content: "\349f";}

Because our project is moving end, so more inclined to the second, because it is not convenient to put in HTML, each modification means that the need for dynamic structure content.

But when using the second method, it is found that some of the icon in most browsers appear as a diamond background with a question mark, as shown in

Above the search, notebook forum, all the forum icons are Iconfont, can show normal, but there are several diamonds and a question mark, why the content properties of CSS imported Iconfont will have problems?

The above screenshot from the 2 of the browser, and then tested other such as uc/qq/Baidu/Dolphin Browser, in addition to the normal under the chrome, the other is that these are not normal, are diamonds plus a question mark. But the strange thing is that several other are able to display normally, and the first way to insert into the HTML, is all the icon is normal. In addition, Iconfont under the Nokia 520 IE can also be normal, 520 of the system seems to be WP8, should be IE10.

Later, the icon that can not be displayed and can be shown the icon to do a detailed comparison, found a feature, can not show the icon of the 16 code is 5 digits, and the normal display of the icon are 4 digits, and I am looking at the data, It has been noted that Iconfont may have problems with coding conflicts. So I iconfont the library to modify the code (Ali's Iconfont library to support the custom code), and then do the demo test, the same icon, modified, can be normal.

For example, the beginning of the micro-letter icon of the 16 code is "f0003", can not be displayed, and later changed to "3465" can be normal display

The image above is in the charm of 2 UC screenshot, other browsers can be normal display, you can take me above the demo test.

This problem in the appearance of looking for a long time, seemingly did not find, I do not know if there are children's shoes in the mobile end encounter and I the same problem? As for the lower version of Android, the device has not been tested.

Later, to confirm this conjecture, the Icomoon and Fontello libraries were tested separately. The Icomoon library supports custom coding, which confirms the problem. The Fontello library does not support custom encoding and is 4-bit by default.