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登录页面设置验证码input框的方法

    vue登录页面设置验证码input框的方法

    这篇文章主要为大家详细介绍了vue登录页面设置验证码input框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 深入浅出分析vue2和vue3的区别

    深入浅出分析vue2和vue3的区别

    这篇文章主要介绍了vue2和vue3的区别,较为详细的分析了vue2与vue3的常见区别与使用方法,需要的朋友可以参考下
    2023-06-06
  • vue-cli 3.0 引入mint-ui报错问题及解决

    vue-cli 3.0 引入mint-ui报错问题及解决

    这篇文章主要介绍了vue-cli 3.0 引入mint-ui报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 使用Element-UI的NavMenu如何隐藏自带的小箭头

    使用Element-UI的NavMenu如何隐藏自带的小箭头

    这篇文章主要介绍了使用Element-UI的NavMenu如何隐藏自带的小箭头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue滑动解锁组件使用方法详解

    vue滑动解锁组件使用方法详解

    这篇文章主要为大家详细介绍了vue滑动解锁组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • vue 实现左滑图片验证功能

    vue 实现左滑图片验证功能

    网页中滑动图片验证一直是各大网站、移动端的主流校验方式,其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护方式,这篇文章主要介绍了vue 实现左滑图片验证,需要的朋友可以参考下
    2023-04-04
  • Vue向下滚动加载更多数据scroll案例详解

    Vue向下滚动加载更多数据scroll案例详解

    这篇文章主要介绍了Vue向下滚动加载更多数据scroll案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • Vue父子模版传值及组件传值的三种方法

    Vue父子模版传值及组件传值的三种方法

    这篇文章主要介绍了Vue父子模版传值及组件传值的三种方法,需要的朋友可以参考下
    2017-11-11
  • vue中js判断长时间不操作界面自动退出登录(推荐)

    vue中js判断长时间不操作界面自动退出登录(推荐)

    这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01

最新评论