vue+element引入阿里巴巴第三方图标库
2020-04-19 21:03
621 查看
1.在阿里巴巴图标库创建自己的工程,并导入需要的图标放入项目
关于如何批量选择图标:
F12输入——
var iconList = document.querySelectorAll('.icon-gouwuche1');
for (var i = 0; i < iconList.length; i++) {
iconList[i].click();
}
2.下载项目至本地
下载解压后,我们只需要把除开demo的文件放进自己的前端项目
在assets目录下创建icon目录放入
3.修改iconfont.css文件
插入代码
[code][class^="el-icontp-"], [class*="el-icontp-"] { font-family:"fontFamily" !important; /* 以下内容参照第三方图标库本身的规则 */ font-size: 18px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
4.引用第三方图标
我们在main.js文件中导入iconfont.css 就可以使用第三方图标库了
在项目中使用图标方式 如 我的图标全称为el-icontp-addition
class属性
[code]<el-button size="small" class="el-icontp-addition" @click="handleAdd" style="padding:6px 4px;width: 90px"> 新增群组 </el-button>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- Element引入Iconfont(阿里巴巴矢量图标库)第三方图标库
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
- vue引入第三方图标库
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
- mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法,vue使用Muse-UI引入阿里巴巴字体图标的方法
- 【vue】vue 引入阿里巴巴图标 render 引入i iconfont
- 【Vue】 element ui 引入第三方图标
- vue全家桶+element-UI搭建后台管理系统(2)“:引入基本样式和图标库”
- Vue 第三方字体图标引入 Font Awesome的方法
- Vue 第三方字体图标引入 Font Awesome
- 解决vue 项目引入字体图标报错、不显示等问题
- 如何在vue项目中引入字体图标
- 从新建vue项目到引入组件Element流程
- vue引入第三方zepto.js库报错
- vue 项目中使用 阿里巴巴 iconfont 图标
- 微信小程序中引入iconfont阿里巴巴矢量图标
- Vue 引入 icon 图标
- vue 引入Element组件
- vue中element-ui的按需引入(vuex)
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui