vue 项目中使用阿里巴巴矢量图标库iconfont
原文：https://www.jianshu.com/p/38262f18eee2
1.打开iconfont阿里巴巴官网https://www.iconfont.cn
2.新建项目(这样方便后期维护图标库)
3.把需要的图标添加到购物车
4.打开购物车并选择添加至项目，然后确定
5.这时候可以在项目中看到你选中的svg图标，这时候可以点击下载至本地
6.打开下载的zip包就可以看到里面的文件，将下面几个文件取出
7.在vue的assets文件夹下创建icon文件夹，将取出的文件放入这个文件夹下
8.在main.js中引入import './assets/icon/iconfont.css'，这样子就可以在vue项目中使用你下载的svg图标
9.在vue中可以写<span class="icon iconfont icon-right"></span>就可以正常显示iconfont图标，修改的时候只需要修改icon-right这个class就可以了，这个class名称可以在font class中看到
每次新增图标后都要覆盖一次资源文件
vue 项目中使用阿里巴巴矢量图标库iconfont的更多相关文章
- [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
- vue 项目中添加阿里巴巴矢量图
1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...
- Vue中如何引入第三方icon库（阿里巴巴矢量图标库）
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- 阿里巴巴矢量图标库（iconfont）批量全选的方法
阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...
- 阿里巴巴矢量图标库（Iconfont）-利于UI和前端的搭配
前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...
- vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...
- 超棒的阿里巴巴矢量图标库——支持IE6
Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台.网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图 ...
- 如何在vue项目中引入阿里巴巴的iconfont图库
1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...
随机推荐
- python基础知识1
1.何为json? json 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机 ...
- centos 6.5 查看发行版本
cat /etc/redhat-release 其他发行版 lsb_release -a
- HTTP协议-Cookie和Session详解
前言: 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的跟踪技术就是Cookie和Session. Cookie通过在客户端记录信息确定用户身份,Session通过在 ...
- hdu 5810:Balls and Boxes（期望）
题目链接 这题似乎就是纯概率论.. E(V)=D(X_i)=npq (p=1/m,p+q=1) #include<bits/stdc++.h> using namespace std; t ...
- 4412 chmod权限
chmod权限 使用命令"man 2 chmod"学习chmod函数• int chmod(const char *path, mode_t mode);– 参数*path:文件路 ...
- Git 中关于一次完整的提交的命令
1.创建仓库(git init .git clone URL) 有两种新建 Git 项目仓库的方法.第一种是在本地通过初始化来创建新的 Git 仓库.第二种是从已有的 Git 远程仓库中克隆出一个仓库 ...
- Thinkphp5 使用爬虫框架 QueryList3 的非composer方法教程
首先,我要吐槽一下.我查了很多博客用tp框架使用composer方法结合 QueryList的教程.就是没有找到非composer的方法.于是摸索总结成功的经验: 工具:phpQuery.php 和 ...
- 对于vue绑定的model值里边get和set的小动作
先看下例子: template里边内容: <el-form-item label="导航条类型"> <el-radio-group v-model="n ...
- 写在Flutter 1.0之前
开始 大概有半年没有写东西了,感觉时间过得飞快,18年也过一小半,趁着谷歌大会再为Flutter这个耀眼的新星,再吹一波! 都beta3了,1.0还会远吗 Flutter团队依然不紧不慢,一步一个脚印 ...
- 汇编指令MOV
格式:MOV DST,SRC 例如: MOV EAX,#050aH ;将十六进制050a 传送到通用寄存器eax中 MOV DI,BX(寄存器到寄存器之间传数) MOV ES,AX(通用寄存器与段寄存 ...