iconfont的几种引用方式

2021-12-21 09:12:41 浏览数 (1)

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

使用过程

方法一

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

方法二

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

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

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

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

方法三

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

方法四

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

方法五

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

svg

0 人点赞