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. java-day20

    注解:说明程序的,给计算机看的 注释:用文字描述程序的,给程序员看的 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性.与类.接口.枚举是在 ...

  2. PHP中的闭包小谈

    接触PHP一段时间以来,我一直以为这是一种基于函数式编程的语言是没有闭包这种东西的,但事实上却颠覆了我的想法,PHP竟然有闭包,下面我们一起来接触一下PHP的所谓的闭包. 根据PHP官网的定义来看,闭 ...

  3. mongo之find结果对象map实例处理

    find 找到结果对象列表 res = await SS_StudentsLeaveTask.find(filter=_filter) self.resData = map(lambda x: str ...

  4. nginx-rtmp-module 指令详解

    译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解. Core rtmp 语法:rtmp { ... } 上下文:根 描述: ...

  5. 笔记43 Spring Security简介

    基于Spittr应用 一.Spring Security简介 Spring Security是为基于Spring的应用程序提供声明式安全保护的安全 性框架.Spring Security提供了完整的安 ...

  6. native 之bitmap 保存坑

    之前开发项目的时候遇到几次一键保存二维码,或凭证的需求,但是使用h5 a标签 保存网络图片有些并不支持,于是想到了 使用navite 的bitmap可能会好一些 bitmap js封装后的原生图片对象 ...

  7. thinlphp配置加载

    在ThinkPHP中,一般来说应用的配置文件是自动加载的,加载的顺序是: 惯例配置->应用配置->模式配置->调试配置->状态配置->模块配置->扩展配置-> ...

  8. 同构图+思维构造——牛客多校第六场E

    考的其实是同构图的性质: 1.同构图的顶点数,边数相等 2.同构图通过点的映射后邻接矩阵相同 这篇博客讲的很好https://www.jianshu.com/p/c33b5d1b4cd9 本题还需要一 ...

  9. mysql数据库名有 横杠 横线 - dash 怎么办

    '''SELECT date FROM `%s` ORDER BY date DESC LIMIT 1''' % 'ZXS-QZCSCRB-3' 重点就是这个符号 ` 键盘左上角

  10. 阿里云ecs(phpstudy一件包）

            选择语言       保存并连接    Linux硬盘挂载是比较常见的管理操作之一.默认情况下数据盘没有挂载,需要手动挂载到系统中.     具体操作是分三步:     硬盘挂载1)需 ...