在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. procfs、debugfs

    procfs 是进程文件系统(file system) 的缩写,包含一个伪文件系统,用于通过内核访问进程信息 这个文件系统通常被挂载到 /proc 目录.由于 /proc 不是一个真正的文件系统,它也 ...

  2. ETC1/DXT1 compressed textures are not supported when publishing to iPhone

    Build application in Unity 2017.20f3 用Unity2017/2018编译iPhone版本出现以下错误: ETC1(or DXT1) compressed textu ...

  3. Tomcat启动堆栈异常

    近日部署项目到Tomcat,访问一直404. 于是查看 catalina.out 日志信息,发现如下信息 30-Jun-2019 16:38:03.642 SEVERE [main] org.apac ...

  4. 《我是一只IT小小鸟》(续)读书笔记——第八周

    第三位作者强调了大学阶段规划的重要性,作者初入大学,一切都很新鲜想尝试,却缺乏对学习生活的规划.最终导致的是学习成绩的下降.其实编程也是一样,我们常常感到自己和那些大神的差距,感慨过后,往往也就罢了. ...

  5. 【RAC】将单实例备份集恢复为rac数据库

    [RAC]将单实例备份集恢复为rac数据库 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识, ...

  6. [Java] Eclipse中复制全限定名(Copy Qualified Name)的效果

    在Eclipse中,使用“ Copy Qualified Name”复制类的全限定名有两种效果: (1)选中工程上的java文件,右键 - Copy Qualified Name 复制的效果是带斜杠的 ...

  7. UDS诊断学习笔记

    定义介绍: UDS(Unified Diagnostic Service)诊断的诊断服务.诊断协议是面向整车所有ECU(电控单元)的一种诊断通信协议,是诊断服务的规范化标准. UDS本质上是一系列服务 ...

  8. 按位与(&),或(|),异或(^),取反(~),左移(<<),右移(>>)

    C语言提供的位运算符列表:运算符 含义 描述& 按位与 如果两个相应的二进制位都为1,则该位的结果值为1,否则为0| 按位或 两个相应的二进制位中只要有一个为1,该位的结果值为1^ 按位异或 ...

  9. javascript慕课入门

    1.javascript引用 html里引用: <script type="text/javascript"> ... ... </script> 引用外部 ...

  10. rsync提权

    介绍:Rsync是linux下一款数据备份工具,默认开启873端口 利用条件:rsync未授权 列出模板 rsync rsync://目标ip:873/ 列出模块src下的文件 rsync rsync ...