教程
iconfont的几种引用方式
333

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

使用过程

方法一

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

2021100102.png

方法二

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



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

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

2021100106.png

方法三

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

2021100107.png

方法四

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

2021100108.png

方法五

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

2021100109.png

结语

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

end
  • 上一篇
  • 下一篇
  • 添加评论
    评论(14)
    BigHuaji

    主题不错,可以分享一下吗

    叶开楗
    强仔
    悟空
    叶开楗

    哪天那你发我忘记收藏了,搞得今天想找找不到了。

    强仔
    强仔

    悟空
    悟空

    就爱偷强桑的首页大图

    强仔鸭
    小赵同学

    强仔国庆快乐啊,好久没看见强仔更新生活日常文章了,这是要准备转战技术博客么

    Duseus

    强仔很强!

    呆哥

    the end 居然还是张图片

    welcome to qiangzai blog