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项目引入阿里巴巴矢量图标的更多相关文章

  1. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  2. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  3. Vue中如何引入第三方icon库（阿里巴巴矢量图标库）

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  4. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  5. 阿里巴巴矢量图标的使用Demo

    一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...

  6. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  7. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  8. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

  9. vue-cli 引入阿里巴巴字体图标：注意点

    vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ...

随机推荐

  1. 8.1_springboot2.x之Actuator应用监控

    1.监管端点测试 引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  2. Struts2入门示例(Myeclipse)

    1.新建Web项目在lib导入struts-2.3.37核心基础jar包 2.在WebRoot新建2个JSP demo1.jsp <%@ page language="java&quo ...

  3. python将字典列表导出为Excel文件的方法

    将如下的字典列表内容导出为Excel表格文件形式: ​ 关于上图字典列表的写入,请参考文章:https://blog.csdn.net/weixin_39082390/article/details/ ...

  4. 【踩坑】IDEA 设置 JVM 参数

    1.可视化界面设置 Run->Edit Configuration... 然后设置 2.配置文件设置 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions 文件,需 ...

  5. 【转】从SOA到微服务，企业分布式应用架构在云原生时代如何重塑

    摘要: SOA 采用中心化的服务总线架构,解耦了业务逻辑和服务治理逻辑:微服务架构回归了去中心化的点对点调用方式,在提升敏捷性和可伸缩性的同时,也牺牲了业务逻辑和服务治理逻辑解耦所带来的灵活性. 为了 ...

  6. 编写Storm程序

  7. xxd - 以十六进制形式表示

    总览 (SYNOPSIS) xxd -h[elp] xxd [options] [infile [outfile]] xxd -r[evert] [options] [infile [outfile] ...

  8. java.sql.Date和java.util.Date的联系和区别

    1) java.sql.Date是java.util.Date的子类,是一个包装了毫秒值的瘦包装器,允许 JDBC 将毫秒值标识为 SQL DATE 值.毫秒值表示自 1970 年 1 月 1 日 0 ...

  9. 微信小程序-云开发

    云开发 初始化 wx.cloud.init({ env: 'test-x1dzi' }) 云数据库 数据类型 String,Number,Boolean,Array,Object,Date,GeoPo ...

  10. 【命令】Maven命令

    当前项目的依赖树: mvn dependency:tree -U.-B.-e -U参数: 该参数能强制让Maven检查所有SNAPSHOT依赖更新,确保集成基于最新的状态,如果没有该参数,Maven默 ...