vue引入第三方图标库
背景:运营后台使用vue+element ui发现,element图标不能满足需求,需引入其他图标。
本人引入的阿里图标库,地址:http://www.iconfont.cn,引入步骤如下:
1.登录,点击进入“我的项目”,建立“项目”
2.选择一些自己要用到的图标添加到“购物车”,选择完毕后,添加至项目
3.再次进入“我的项目”,点击“下载至本地”,如图
下载成功后解压文件如下:
4.项目引用,src/assets 下 新建一个 icon文件夹,将下载下来的文件夹内容复制到icon中,然后打开iconfont.css添加下面代码
/*请注意此处的class及font-family是自己配置的*/
[class^="el-icon-self"], [class*=" el-icon-self"] { font-family:"iconfont" !important; font-size: 14px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 5px; }
注:上面的2个class 和 font-family 应与阿里矢量库中项目设置的参数一致,如图
5.项目使用
(1)在main.js 引入 import './assets/icon/iconfont.css'
(2)在组件中使用 <i class="el-icon-self-publish"></i>
posted on 2018-01-17 19:35 zhoujian917 阅读(481) 评论(0) 编辑 收藏 举报