说起阿里的iconfont，肯定都用过FontAwesome，相比之下，二者都是免费的图标，引用方式大差不差。从兼容性的方面来讲，iconfont支持所有低版本浏览器，而FontAwesome只支持IE7+的高版本浏览器，从图标美感和数量方面来讲，这都不用比，显然iconfont更胜一筹，从使用上讲，iconfont也更为灵活，不像FontAwesome那样，需要引入整个文件包里的文件到项目，显得臃肿，FontAwesome有文档支持，而iconfont在下载添加图标时会有一个demo文件供参考，也是一个不错的参考方法。

使用过程

方法一

最简单的一种就是直接在官网选择图标，下载为svg,png格式的图片，直接在网页里img调用即可，可以保留图标的色彩

方法二

我们需要把我们调好的图标，添加到自定义的一个项目里，打包下载到本地

引入css，设置类iconfont在里面需要设置font-family和font-size设置大小，这种通过Unicode编码实体方式引入，快捷，但是默认情况下不支持多色，添加多色图标会自动去色。

方法三

这种通过类来添加图标，也是直接添加多色图标会导致自动去色。

方法四

通过伪元素before来调用，content里设置图标的编码，需要加 转义字符，这种方式一样会导致图标失色

方法五

这种好像在FontAwsome里没有，通过js把svg做成了一个集合来调用，可以支持多色图标，不再受单色限制。但兼容性较差，支持IE9+及现代浏览器。

结语

感谢访问强仔博客，希望本文对你有所帮助！