在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. 类选择器与ID选择器的比较

    如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...

  2. java开发手册-总结与补充

    1.分层领域模型规约 1.DO( Data Object):与数据库表结构一一对应,通过 DAO 层向上传输数据源对象. 2.DTO( Data Transfer Object):数据传输对象, Se ...

  3. 深入理解jvm--分代回收算法通俗理解

    1.通俗的理解java对象的这一辈子 我是一个普通的java对象,我出生在Eden区,在Eden区我还看到和我长的很像的小兄弟,我们在Eden区中玩了挺长时间.有一天Eden区中的人实在是太多了,我就 ...

  4. C#创建DataTable(转载)

    来源:https://www.cnblogs.com/xietianjiao/p/11213121.html方法一: DataTable tblDatas = new DataTable(" ...

  5. MySQL DataType--定点数(Fixed-Point Types)学习

    DECIMAL和NUMERIC MySQL支持两种定点数类型:DECIMAL和NUMERIC,而NUMERIC实现为DECIMAL,因此MySQL中DECIMAL和NUMERIC等价相同. 如使用下面 ...

  6. 关于git报 warning: LF will be replaced by CRLF in README.md.的警告的解决办法

    在使用git把代码上传至仓库时,会有下面这种警告: 虽然说是警告,但是看着真的很碍眼啊,特别是有强迫症的人就更难受了. 输入这一行命令就可以完美解决了 git config core.autocrlf ...

  7. ondblclick和dblclick区别

    1.ondblclick是一个HTML DOM Event 对象,没有jquery也可以触发这个事件的,使用方法例如 1 <button ondblclick="xxx"&g ...

  8. Gtest:参数化

    转自:玩转Google开源C++单元测试框架Google Test系列(gtest)之四 - 参数化 一.前言 在设计测试案例时,经常需要考虑给被测函数传入不同的值的情况.我们之前的做法通常是写一个通 ...

  9. HotSpot虚拟机的锁优化

    面试中多次被问到synchronized关键字的实现原理,一直认为仅是monitorenter与monitorexit两条指令而已,原来底层涉及到多种锁优化策略,包括:自旋锁,轻量锁,偏向锁. 1.自 ...

  10. Synchronized偏向锁和轻量级锁的升级

    原文:https://blog.csdn.net/tongdanping/article/details/79647337 锁的优化1.锁升级锁的4中状态:无锁状态.偏向锁状态.轻量级锁状态.重量级锁 ...