在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 ...
随机推荐
- java-day24
JDBC控制事务: 1.事务:一个包含多个步骤的业务操作,如果这个业务操作被事务管理,则这个步骤要么同时成功,要么同时失败. 2. 操作: 1. 开启事务 2. 提交事 ...
- 枚举加countdownLatch的使用
package com.cxy.juc; import java.util.concurrent.CountDownLatch; public class CountDownlatchDemo { p ...
- 实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...
- Kettle使用kettle.properties
kettle.properties 是一个变量文件,这个文件我使用的最多的地方是保存 “数据库连接” 用户名和密码. 如果不用这个文件,那么使用“数据库连接”时,需要硬编码写到文件里. 有一天dba告 ...
- css3 鼠标悬停图片动画
<div class="grid"> <figure class="effect-milo"> <img src="im ...
- JS对象 数组排序sort() sort()方法使数组中的元素按照一定的顺序排列。 语法: arrayObject.sort(方法函数)
数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码 ...
- 在windows server 2012中安装完oracle 11 client如何使用
1.首先要添加监听配置,这样才可以没有报错的连接上服务器,至于如何添加,请自行搜索. 2.打开SQL Plus连接oracle server端,这里因为是小白,看到命令行界面上来就需要输入用户名密码 ...
- shell实现批量创建交叉编译工具软链接
在学习嵌入式过程中,常常用到交叉编译工具,而原本的交叉工具链比较长,不利于记忆以及使用, 解压后的交叉编译工具链如下图所示 为了更好的使用交叉编译工具与其他开发者保持一致,经常需要用到软链接. NAM ...
- python中常见的内置函数
map #自定义map函数 def map_test(func, list): res = [] for item in list: res.append(func(item)) return res ...
- ps使logo背景色透明
方法一:魔法工具(对复杂的logo误差较大) 魔法工具--左键点击选区--delete--保存 方法二:拾色器 1.有的站上的素材图片不能直接用,需要先变成rgb图像,可这样操作:图像\模式,选择rg ...