IcoMoon双色字体图标换行时未完全显示

项目需要在一些用户名后面显示图标。

最初直接用图片格式添加在文字后面，
但在pc端和不同的手机端，图标位置忽上忽下，
很难调，代码也显得杂乱。

最终决定将mark制作成字体图标，
用i标签来显示，
以保证图标和字体位置一致。
在需要加下划线的位置，也不用做任何特殊处理。

参考了文章
链接: link.
自制字体图标，引入项目。

位置的问题完美解决，
但测试人员反映，
在iOS端，有的图标显示有异常。

正常是红色箭头所指，
蓝色多边形内有一个白色勾，
但绿色箭头所指处未显示白色勾。

iOS端icon出现在一行的末尾时，
有时会出现这种情况，
安卓和pc端都没有出现。

有下划线的地方可以观察到，
第二行开头有空格。

原来是因为icon的两个颜色被分为了两个部分加载进来，
恰好在蓝色多边形（ class 为 path1的span）和白色勾（class 为 path2 的span）中间进行了换行。

解决

在css代码中限制i标签内的内容在一行显示即可。

[class* = "icon-"]{
	display:inline;
	white-space:nowrap;
}