CSS 字体图标引用

CSS 字体图标引用_第1张图片
Unsplash

在自己的项目中,我们或多或少的需要插入一些 icon,缺少 UI 设计天赋的我只能去搜寻现有的 icon 了,在这里推荐大家去 Iconfont 阿里巴巴矢量图标库 中去搜寻自己想要的 icon,将所选的 icon 加入到购物车当中,点击 下载代码 即可

CSS 字体图标引用_第2张图片
下载购物车中的 icon 图标

项目解压后,可以看到有三个 demo 演示网页,分别对应 font-class 引用,symbol 引用,unicode 引用,里面关于字体如何引用有着详细说明,在这里就不再复述

CSS 字体图标引用_第3张图片
项目文件

font-class 引用,因为本质上还是使用的字体,所以我们可以通过修改 color 属性来变化 icon 的颜色,多色 icon 会自动失色

CSS 字体图标引用_第4张图片
font-class 图标

symbol 引用,使用的是 svg,所以可支持多色 icon,而单色 icon 也能通过修改 color 属性来变化 icon 的颜色

CSS 字体图标引用_第5张图片
symbol 图标

unicode 引用,跟 font-class 的引用基本一致

CSS 字体图标引用_第6张图片
unicode 图标
End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为优秀作者献上一发助攻吧,谢谢!^ ^

你可能感兴趣的:(CSS 字体图标引用)