在vue项目引入阿里巴巴矢量图标
1、在阿里矢量图标库将想要的图标加入购物车，然后在购物车中将图标添加到项目；
2、到我的项目中，将图标下载到本地
3.在vue项目的assets文件夹下新建一个iconfont文件夹（名字自定义），将刚刚下载下来的代码包中的
- iconfont.css、
- iconfont.eto、
- iconfont.svg、
- iconfont.ttf、
- iconfont.woff
复制到iconfont文件夹下。
4.在main.js中全局引入iconfont.css。
import './assets/iconfont/iconfont.css'
5.之后就可以在项目中正常使用了
<i class="iconfont icon-ren"></i>
在vue项目引入阿里巴巴矢量图标的更多相关文章
- vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...
- MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标
MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...
- Vue中如何引入第三方icon库（阿里巴巴矢量图标库）
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- 微信小程序引用阿里巴巴矢量图标iconfont
最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...
- 阿里巴巴矢量图标的使用Demo
一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...
- [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- 微信小程序里使用阿里巴巴矢量图标
登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...
- vue-cli 引入阿里巴巴字体图标：注意点
vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ...
随机推荐
- <python基础>python继承机制
子类在调用某个方法或变量的时候,首先在自己内部查找,如果没有找到,则开始根据继承机制在父类里查找. 根据父类定义中的顺序,以深度优先的方式逐一查找父类! class D: def show(self) ...
- 6-MySQL-Ubuntu-操作数据表的基本操作(一)
注: SQL语句的关键字不区分大小写,如select 和Select都可以 (1) 查看当前使用的数据库; select database(); (2) 使用某数据库或切换到某数据库 use 数据库名 ...
- Hive之explode和lateral view
Hive之explode 一. explode, 行转列. 1.1. 用于array类型的数据 table_name 表名 array_col 为数组类型的字段 new_col array_col被e ...
- 从零开始搭建系统1.3——Tomcat安装及配置
首先安装jdk,手动解压JDK的压缩包,然后设置环境变量 1.卸载自带openjdk 查询OpenJDK rpm -qa|grep java 批量卸载所有名字包含jdk的已安装程序.命令行: rpm ...
- java中Class.getMethods()和Class.getDeclaredMethods()的区别
在java中,可以根据Class类的对象,知道某个类(接口)的一些属性(成员 ,方法,注释,注解)等.由于最近的工作中用到了这些,其中需要在代码中格局反射知道某些类的方法,查看文档的时候,看到了get ...
- float f=3.4;是否正确？
float f=3.4;是否正确? 不正确.3.4是双精度数,将双精度型(double)赋值给浮点型(float)属于下转型(down-casting,也称为窄化)会造成精度损失,因此需要强制类型转换 ...
- CSIC_716_20191206【并发编程理论基础】
进程:正在执行的一个过程,进程是对正在执行过程的一个抽象.区别于程序, 进程的三种状态: 进程是动态的. 就绪态ready: 进程具备运行状态,等待操作系统分配处理器 运行状态running:进 ...
- 【集合！】 20140416 && 20140417集训 总结
mobius的奇怪演绎 当我第一眼看见题目中出现mobius的时候,我唯一想到的就是某科学家对于n维空间的阐述与思考,同时还提出了一个mobius环.而这道题中的环就是mobius环咯.不过其实这是一 ...
- sqoop一些常用命令及参数
常用命令列举 这里给大家列出来了一部分Sqoop操作时的常用参数,以供参考,需要深入学习的可以参看对应类的源代码. 序号 命令 类 说明 1 import ImportTool 将数据导入到集群 2 ...
- csp-s模拟测试97
csp-s模拟测试97 猿型毕露.水题一眼秒,火题切不动,还是太菜了. $T1$看了一会儿感觉$woc$期望题$T1??$假的吧??. $T2$秒. $T3$什么玩意儿. 40 01:24:46 00 ...