vue项目中icon图标的完美引入
第一步:
进入阿里矢量图标库并登录 地址:https://www.iconfont.cn
第二步:
选择项目需要的图标添加到库
第三步:
选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建一个(按钮都在同一个页面)
第四步:
添加到项目后,在弹出的页面修改项目防止icon命名与自己的UI框架(如elementui)冲突
在 更多操作-》编辑项目 下(设置字体的前缀:fontClass/Symbol 前缀)
第五步:
修改完成项目后进行选择css并下载下来
第六步:
在你的vue项目assets文件夹下面创建icon文件夹,把下载的压缩包解压的文件复制到icon文件夹下面(当然demo等不需要的文件按你的需要删除)
第七步:
打开iconfont.css在icon样式行添加第四步设置的前缀样式关联
代码:,[class^="el-icon-zz"],[class*=" el-icon-zz"] //注意第二个el-icon-zz前面有个空格
第八步:
在main.js当中引入使用(全局的),局部的在需要的引入即可(路径填对)
第九步:
在需要的vue页面使用即可:
最终效果:
vue项目中icon图标的完美引入的更多相关文章
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 更换vue项目中标签页icon
问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改 ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
随机推荐
- SpringBoot 部署到linux环境
第一部分:Springboot项目部署 说明:工具使用的是IEDA 第一:项目打包 1.在pom文件中添加插件 <build> <plugins> <plugin> ...
- NoSQL、memcached介绍、安装memcached、查看memcached状态
1.NoSQL 2.memcached介绍 3.安装memcached(二进制包安装) yum install -y memcached libmemcached libevent (若没有安 ...
- vue2上传图片到OSS
第一步:安装阿里云OSS <!-- 引入在线资源 --> <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk- ...
- Docker系列(四)Centos6.5 搭建私人镜像仓库 v2
.下载.运行registry 下载registry镜像: $ docker pull hub.c.163.com/library/registry 这个下载的过程有点长,耐心等待一下.O(∩_∩)O哈 ...
- Filebeat工作过程(二)
Filebeat简介 Filebeat是一个轻量级的收集日志和传输日志的工具(一直以为Filebeat是存储数据,并不是的它只是做一个收集传输功能):Filebeat安装在每一个你想要收集日志的服务器 ...
- Flask之 安装与HelloWorld
安装Flask 首先我们来安装Flask.最简单的办法就是使用pip. pip install flask 然后打开一个Python文件(app.py),输入下面的内容并运行该文件.然后访问local ...
- LOJ 2551 「JSOI2018」列队——主席树+二分
题目:https://loj.ac/problem/2551 答案是排序后依次走到 K ~ K+r-l . 想维护一个区间排序后的结果,使得可以在上面二分.求和:二分可以知道贡献是正还是负. 于是想用 ...
- 数字色彩的艺术 | The Art Of Digital Color(修订)
翻译一篇来自2011年的文章,原链地址:https://www.fxguide.com/featured/the-art-of-digital-color/ 在这个时期,DPX日渐式微,ACES方兴未 ...
- Restful OData Protocol
Web服务有两种实现方式: 一是SOAP协议方式 二是REST方式. SOAP是一套完整的实现Web服务的解决方案.这里有必要先简单了解SOAP方式的Web服务,然后对比SOAP方式,我们会发现RES ...
- EntityFramework Inner Exception Catch
在保存时加入这一段,就可以查看error具体是哪里出错了.正式发布需要删除这段,try catch毕竟会影响性能 try { entity.SaveChanges(); } catch (DbEnti ...