引入 iconfont 后有时候图标无法正常显示？

Question

引入 iconfont, 比如

<span class="layer-detail icon iconfont icona-detail"></span>

图标大多时候能够正常显示

但有时候无法正常显示

这是怎么回事？如何解决？

Answer 1

应该是 CSS 文件解析时编码异常，iconfont 图标的 Unicode 编码没有被正确解析造成。

之前遇到过，用的也是 iconfont 字体图标，在打开浏览器开发者工具进行调试时，iconfont 字体图标偶尔会出现乱码的情况。检查发现是字体图标的伪元素 content 的 Unicode 值出现了乱码，估计是控制台解析样式文件时用的不是 utf-8。

可以尝试在样式文件第一行添加 @charset "UTF-8"; 试试。

Answer 2

使用symbol的方式引入。只需要替换一个js文件即可,就不用纠结字体文件css文件了。

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>