iconfont的几种引用方式

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

fontawesome文档

使用过程

方法一

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

2021100102.png

方法二

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

$(document).ready(function(){$(".galleryidpost").lightGallery({selector: ".yoniu-index-img",share: false,share: false,showThumbByDefault: false,autoplayControls: false});});

在我们的压缩包里，需要把这几个文件复制到我们的项目里

2021100105.png

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

2021100106.png

方法三

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

2021100107.png

方法四

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

2021100108.png

方法五

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

2021100109.png