在main.js中

import './assets/images/iconfont/iconfont.css'
import './assets/images/iconfont/iconfont.js'

assets / images / iconfont中的东西 就是你下载的文件 解压出来的

在组件中使用的话

<svg class="icon closeImg" aria-hidden="true"">
           <use xlink:href="#icon-guanbi"></use>
 </svg>

其中红色的字是从阿里iconfont里复制的代码

记得在css中加

.icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

vue 中使用阿里iconfont彩色图标的更多相关文章

  1. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  2. vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标

    第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...

  3. Winfrom中如何使用Iconfont字体图标补充

    1.参考技术文章:http://www.cnblogs.com/isaboy/p/csharp_Font_Awesome_window_form_icon.html 2.参考后主要纠结在图标的unic ...

  4. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  5. vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  6. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  7. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  8. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  9. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...

随机推荐

  1. Leetcode刷题python

    Two Sum 两数==target 方法二更好 题1,对时间复杂度有要求O(n),所以维护一个字典,遍历过的数值放在字典中,直接遍历时候查找字典中有没有出现差,查找字典时间复杂度是O(1),所以O( ...

  2. Oracle中nlssort()函数排序功能

    转自:https://www.iteye.com/blog/libaxiaoyuan-2199851 Oracle9i之前,中文是按照二进制编码进行排序的.在oracle9i中新增了按照拼音.部首.笔 ...

  3. nepenthes用法

    安装 # apt-get install nepenthes 配置文件 # vi submit-file.conf submit-file { path "/var/lib/nepenthe ...

  4. 什么是SAP Intelligent Robitic Process Automation - iRPA

    所谓智慧企业,一个特征就是具备将复杂但低附加值的重复流程通过自动化的方式完成的能力.通过自动化,从而将宝贵的人力资源投入到更高附加值的工作中去,比如提供产品和服务的品质,提升用户体验.SAPGUI时代 ...

  5. jQuery知识梳理20190818

    目录 jQuery知识梳理20190818 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托(委派/代理) 4 . 多库共存 5.window.onload与$ ...

  6. docker 安装 oracle

    docker 安装 oracle 部署链接:https://www.linuxidc.com/Linux/2017-03/141760.htm 本次使用docker安装oracle 1.搜索可使用的镜 ...

  7. SpringBoot项目打成jar在linux后台运行

    --关闭客户端依然进程存在 nohup java -jar spring-boot-hello-1.0.jar 1>/dev/null 2>&1 & --Ctrl+C后不会 ...

  8. spring cloud turbine 监控不到其它机器上的hystrix.stream 的解决方法 指定监控ip

    turbine多台机器熔断聚合的时候  turbine控制台一直寻找的是localhost下的监控熔断数据. c.n.t.monitor.instance.InstanceMonitor   : Ur ...

  9. C# 上传大文件

    上传大文件首先要修改web.config文件,否则上传报错.在web.config添加如下配置maxRequestLength表示能上传的最大文件值,单位是KB,requestLengthDiskTh ...

  10. NOIP2019 PJ 对称二叉树

    题目描述 一棵有点权的有根树如果满足以下条件,则被轩轩称为对称二叉树: 二叉树: 将这棵树所有节点的左右子树交换,新树和原树对应位置的结构相同且点权相等. 下图中节点内的数字为权值,节点外的 id 表 ...