Vue 自定义图标
因为elementUI提供的icon有很大的局限性,想要放自己定义的图标,需要繁琐的引入并用img标签展示。不能像ElementUI 引入图标那样,支持类似字体的修改样式,大小和颜色。
所以,思考再三,决定简单的介绍下怎么自定义图标。
- 首先打开阿里巴巴矢量图标库 选择其中一个图标,添加入库,如图
- 打开右上角,购物车,弹窗,点击添加至项目
- 确定之后,如图
- 下载至本地,文件目录
- 目录包含Demo介绍,在vue项目中,将该解压后的文件放置 根目录下,public文件夹下,或者static文件夹下。版本不一样分不同文件夹。然后在index.html 引入样式
<link rel="stylesheet" href="static/iconfont/iconfont.css"/>
- 在vue文件下,引用图标
- 注意:iconfont一定要写 后面跟 自定义图标名称xxx 前缀icon-xxx