vue element项目引入icon图标的方法
更新时间：2018年06月06日 09:54:49 作者：bhq1711617151
这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库.
因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库
阿里巴巴图标网站: http://www.iconfont.cn/
下面具体介绍如何使用
1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.
2.点击添加到项目后,选中第二个
3.点击更多操作里面的编辑,注意前缀的设置，后面的命名不能和element里面的发生冲突
4.设置后保存代码到本地,然后解压到项目里,并对里面的iconfont.css文件进行修改
5.在iconfont.css进行修改,在文件里添加如下代码
[class^="el-icon-ump"], [class*=" el-icon-ump"] {
font-family:"fontFamily" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
6.添加之后在main.js引入图标
import "./assets/icon/iconfont.css";
7.在你需要引入图标的地方直接使用即可.
总结
以上所述是小编给大家介绍的vue element项目引入icon图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要分享的是vue中的局部过滤器和全局过滤器代码实操，下面文章主要以代码展现，具有一的的知识参考性，需要的小伙伴可以参考一下2022-02-02
本文主要介绍了浅谈Vue灰度发布新功能的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解Vue内部怎样处理props选项的多种写法，详细的介绍了props的使用的写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue中组件的缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Nuxt.js之自动路由原理的实现方法，nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值，需要的朋友可以参考下2018-11-11
Vue3 setup的注意点及watch监视属性的六种情况分析
这篇文章主要介绍了Vue3 setup的注意点及watch监视属性的六种情况,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下2023-11-11
本文章向大家介绍vue组件中的数据共享，主要包括vue组件中的数据共享使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下2022-11-11
这篇文章主要介绍了Nuxt的路由配置和参数传递方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue+Element UI 实现视频上传功能,前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示，后台提供视频上传API并返回URL，具体实现代码及效果展示跟随小编一起看看吧2022-01-01
最新评论