vue 中使用阿里iconfont彩色图标
在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彩色图标的更多相关文章
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标
第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...
- Winfrom中如何使用Iconfont字体图标补充
1.参考技术文章:http://www.cnblogs.com/isaboy/p/csharp_Font_Awesome_window_form_icon.html 2.参考后主要纠结在图标的unic ...
- 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标
自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- vue 中使用iconfont Unicode编码线上字体图标的流程
1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...
随机推荐
- ES5和ES6的继承
ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...
- 使用Mimikatz读取密码
法一: https://github.com/gentilkiwi/mimikatz/releases/tag/2.1.1-20170813 第一条:privilege::debug //提升权限 第 ...
- FreeRTOS软件定时器
API函数 //创建 TimerHandle_t xTimerCreate( const char * const pcTimerName, const TickType_t xTimerPeriod ...
- AppDir【创建缓存目录】【建议使用这个工具类】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 创建缓存目录 public static String APP_CACHE = "";// /storage/e ...
- 如何传递大文件(GB级别)
一.拆分:压缩工具,压缩并拆分为多个小文件. 二.QQ离线传输 QQ离线文件有限制条件: 1.离线传送的文件,为用户保存7天,逾期接收方不接收文件,系统将自动删除该文件: 2. 离线传送的文件,单个文 ...
- 小程序的openid和公众号的openid是否一致
早期的产品只用了公众号,没有注册开放平台(没有unionid).然后现在需要上线小程序,这种情况下,企业是同一个企业的,但是公众号的openid和小程序的openid是否一致呢? 我来回答你这个问题: ...
- linux服务器中查看图片
在图片目录下使用命令行:基于python3 python -m http.server 1 python2可能是: python -m SimpleHTTPServer 1 然后在浏览器输入服务器IP ...
- SQL中and和or的区别是?
今天有这样得一个需求,如果登陆人是客服的话,会查询订单是’该客服’以及还没有匹配客服的,刚开始想的是直接在sql语句上拼写 or assigned_id is null 的,测试了一下发现这样的 ...
- centos7部署postgresql集群高可用 patroni + etcd 之patroni篇
实验环境:centos7.4纯净版 postgres版本: 9.6.15 etcd版本:3.3.11 patroni版本:1.6.0 patroni介绍可参考:https://github.com/z ...
- Laravel —— tips 总结
一.Laravel 中 ajax 请求需要设置 header $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token& ...