vue引入第三方图标库
2018-01-17 19:35
453 查看
背景:运营后台使用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>
相关文章推荐
- Vue 第三方字体图标引入 Font Awesome的方法
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
- Vue 第三方字体图标引入 Font Awesome
- 【Vue】 element ui 引入第三方图标
- VUE ---element ui 引入第三方 iconFont
- 如何在vue中引入第三方jquery,swiper等库(一)
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
- 【Vue】element ui等 引入iconfont彩色图标
- vue中如何引入第三方库
- Element引入Iconfont(阿里巴巴矢量图标库)第三方图标库
- vue引入网络第三方js(引入高德地图为例)
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 解决vue 项目引入字体图标报错、不显示等问题
- vue 外部字体图标使用,无须绝对路径引入办法
- Vue中使用ElementUI使用第三方图标库iconfont
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- Vue 中如何引入第三方 JS 库
- vue如何引入icon小图标的js文件