在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. Jmeter学习笔记(二十)——后置处理器XPath Extractor使用

    一.背景 在使用过程某些操作步骤与其相邻步骤存在一定的依赖关系,需要需要将上一个请求的响应结果作为下一个请求的参数. Jmeter中后置处理器正则表达式提取器和XPath Extractor都可以将页 ...

  2. Linux内核同步机制之completion

    内核编程中常见的一种模式是,在当前线程之外初始化某个活动,然后等待该活动的结束.这个活动可能是,创建一个新的内核线程或者新的用户空间进程.对一个已有进程的某个请求,或者某种类型的硬件动作,等等.在这种 ...

  3. 结对项目(java实现)

    一 .Github项目地址:https://github.com/734635746/MyApp 二.PSP表格 PSP2.1 Personal Software Process Stages 预估耗 ...

  4. 【转载】TX - row lock contention 的一些场景

    TX - row lock contention 的一些场景 原创 2016-07-11 易欣 云和恩墨 易欣(Eson) 云和恩墨技术专家 本文整理来自7月7日周四晚云和恩墨大讲堂嘉宾易欣分享的主题 ...

  5. jQuery知识梳理20190818

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

  6. CSS的一个小bug,Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

    在vue重新渲染页面的时候,报了一个错误: 翻译了报错信息后,Gradient has outdated direction syntax. New syntax is like to left in ...

  7. Linux命令——gdisk、fdisk、partprobe

    gdisk.fdisk MBR分区表请使用fdisk分区,GPT分区表请使用gdisk分区 MBR与GPT区别参考:Linux磁盘管理——MBR 与 GPT gdisk.gdisk这两个命令参数不需要 ...

  8. vue父组件触发子组件方法

    比如应用场景是弹窗中的组件,想要点弹窗时更新该组件展示对应记录的的值 methods: { edit (record) { this.mdl = Object.assign({}, record) t ...

  9. js面向对象--由浅入深

    基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或方法都有一个名字,而每个名字都映射到一个值. 类 在现实生活中,相似的对象之间往往都有一些共 ...

  10. wpscan 更新超时报错

    wpscan更新超时报错 本人亲测方法2 https://data.wpscan.org/plugins.json https://data.wpscan.org/plugins.json.sha51 ...