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中引入样式文件的方法
一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&
-
Vue框架中正确引入JS库的方法介绍
本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U
-
Vue项目中引入外部文件的方法(css、js、less)
这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font
-
详解vue中引入stylus及报错解决方法
前提条件是已经有了vue项目,如果没有,请先建立,具体方法看这里https://cn.vuejs.org/v2/guide/installation.html 安装stylus 好了,建立好项目后我们来安装stylus npm install stylus stylus-loader --save-dev 这样就安装上了stylus. 接下来就可以使用了,使用方式分两种.一种是在.vue文件的style块中使用,一种是引用.styl文件的形式 在.vue文件的style块中使用 这个很简单,只要
-
在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa
-
利用vue+elementUI实现部分引入组件的方法详解
前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element.因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有
-
vue学习笔记五:在vue项目里面使用引入公共方法详解
今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台
-
vue 项目如何引入微信sdk接口的方法
做微信的网页基本上都要接入微信的sdk,我在做的时候,也颇费了一番功夫,然后就想记录一下,供自己日后翻阅,以及让有需要的朋友可以做一下参考,如果喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的 接入文档,vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,搜易就需要在每个路由地址都引入一遍. 整体步骤: vue引入sdk的
-
详解从新建vue项目到引入组件Element的方法
本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为
-
vue 引入公共css文件的简单方法(推荐)
如果不想把css写在单文件组件里如这样: <template> <div id="app"> <div class='nav-box'> <ul class='nav'> <li> <a href="#/" rel="external nofollow" rel="external nofollow" >home</a> </li>
随机推荐
- PHP简单实现欧拉函数Euler功能示例
- SQL行转列和列转行代码详解
- 多系统启动秘密:Boot.ini设置方法
- 按扩展名分类批处理bat文件
- IOS缓存管理之YYCache使用详解
- JavaScript 字符编码规则
- 深入PHP与浏览器缓存的分析
- C#多线程学习之(三)生产者和消费者用法分析
- mysql 5.7.30安装配置方法图文教程
- Android ExpandableRecyclerView使用方法详解
- javascript中定义类的方法详解
- Linux中的host命令应用实例详解
- c语言合并两个已排序数组的示例(c语言数组排序)
- 深入Oracle的left join中on和where的区别详解
- 架设linux下最简单的VPN系统
- 初步学习Java中线程的实现与生命周期
- PHP学习 运算符与运算符优先级
- [ASP]使用类,实现模块化
- C# 面向对象的基本原则
- Python实现修改IE注册表功能示例