vue前端项目中使用阿里矢量图标（Font class）
一、登录阿里巴巴矢量图标库
阿里巴巴矢量图标库
二、点击图标库
三、选择图标
选择图标后，会进入该类型的图标库，然后鼠标划上想选择的那个图标，会有三个选择，分别为“添加入库”， “收藏”和“下载”， 这里我们点击“添加入库”
四、加入购物车
点击“添加入库后”，我们会在页面的右上角看到购物车的图标，然后点击进入购物车
点击“添加至项目”，选择好项目名称后点击“确定”，我们即可在项目中看到该图标
五、 使用
1 进入项目后，点击“Font class”,然后点击下载至本地
2 然后解压到文件夹
3 将上面蓝框框住的文件放到你正在写的项目中（放到src/assets目录下，因为是静态资源）
4 在main.js文件内全局引入 阿里云字体图标 css，这里一定要注意路径要正确，要和你上面存放文件的位置对上
5 为避免出现图标方框的情况，需要对font进行初始化，在全局样式文件中加入如下代码
6 在项目中，鼠标划上你要使用的图标，然后点击“复制代码”，即可复制该图标的类，然后在你的项目中使用
7 还可以给该图标添加样式，目前可以添加颜色和字体大小两种样式
六、注意事项
该方法是单色图标，不支持多色图标，简单来说，你加入的图标颜色很丰富，但是使用到项目中却只能显示黑色，你可用通过上面的添加样式来简单的改变颜色和字体大小
vue前端项目中使用阿里矢量图标（Font class）相关推荐
- vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
- vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可 记得在m ...
- Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标 使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
- VUE更换项目中的favicon.ico图标
VUE2中更换项目中的favicon.ico图标步骤: 方法一: 1.使用比特虫免费在线制作ico图标(网站地址:https://www.bitbug.net/): 2.将新的图标命名为new-fav ...
- vue前端项目引入iconfont阿里图标（font class）
1.首先进入阿里图标库官网(iconfont-阿里巴巴矢量图标库),选取你所要的图标,将其添加购物车. 2.然后进入购物车,点击添加进项目 3.点击下载到本地 4.将下载的文件复制下来 5.在main ...
- 前端项目中位图和矢量图的优缺点及iconfont小图标制作流程
1.BMP图 BMP格式的图片,取自英文单词Bitmap,Windows中文版翻译文'位图' 支持四种的BPM格式的图 l 单色位图(1位)--1字节记录8个像素,图片一般只有黑和白. l 1 ...
- 手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址:IconFont-阿里巴巴矢量图标库 一.注册账号 要使用阿里图标,首先你要在它的官网注册一个账号,注册的方式有多种(手机号,Github,微博,阿里域账号),根据你自己的情况进行选 ...
最新文章
- 涨姿势，Java中New一个对象是个怎么样的过程？
- Python标准模块--asyncio
- 以POST方式下载文件
- php应用数据库连接中的单例模式
- .NET也内卷了，BAT大厂近日上演抢人大战！
- Linux 及其它类 Unix 系统的系统服务管理和控制程序（初始化系统/init system）简单梳理
- ASP.NET Core的身份认证框架IdentityServer4--入门【转】
- gitlab 删除历史修改记录_Excel表格使用记录单功能快速录入、修改、删除、查询数据...
- DFS和BFS算法介绍
- spring缓存与Redis
- TP5常用命令符操作
- 微博技术架构分析和设计
- 目标建立——SMART法则
- 写一个计算器（C语言版本），可以求出：整数的加，减，乘，除四则运算
- html导航栏悬停过渡,JS 实现导航栏悬停效果
- GBase 8s 客户端工具之dbaccess
- 什么是SaaS，SaaS有哪些优缺点？
- Workflow Engine for .Net Core ENTERPRISE v4.0.10-SEO-狼术
- Joshua Porter 20条UI设计原则
- 计算机会议名称和简写（CV/NLP）