使用组件库时,图标往往不能满足需求,所以我们常常需要用到第三方图标库。阿里图标库是我们的常客。有两种形式,一是单色,二是彩色的。
单色图标的引用
- 1、在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压
- 2、在项目src目录新建目录font,用于存放刚才下载解压的代码
-
3、在main.js导入iconfont.css文件
import './font/iconfont/iconfont.css'
-
4、在代码中使用class="iconfont icon-XXX"就可以使用图标了
这是直接引用,而像Element-UI则是将其与自己的图标进行了融合。
Element-UI引入第三方图标库:
- 在iconfont官网选图标,加入购物车,加入项目
- 编辑项目,修改FontClass/Symbol 前缀为:el-icon-xx (xx为自己定义的类名,注意不要与Element自身的图标类名重合)
- 将图标项目下载至本地,解压
- 在项目src目录新建目录font,用于存放刚才下载解压的代码
-
打开iconfont.css文件,将以下代码加进去:
[class^="el-icon-my"], [class*=" el-icon-my"]/*这里有空格*/* { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- 在main.js导入iconfont.css文件
import './font/iconfont/iconfont.css' - 打开在阿里icon的项目,复制你想要的图标代码
- 使用方式与Element-UI自带的图标一样
彩色图标
- 1、在iconfont官网选图标,加入购物车,加入项目,注意选择Symbol,再下载到本地
- 2、在项目src目录新建目录font,用于存放刚才下载解压的代码,或者只拷贝其 iconfont.js文件
- 3、在main.js导入iconfont.js文件
-
4、写入图标代码
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-lianxi"></use> </svg>
注意: 在这里要用#加class名
-
5、写入svg图标通用样式
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
补充:aria-hidden 的意思
图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true" 属性。
感谢大神的分享:
https://www.cnblogs.com/golov...
https://www.jianshu.com/p/59d...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。