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,然 ...
随机推荐
- win10设置锁屏密码
1.点击右下角窗口键 2.选择点击设置 3.点击账户 4.点击登录选项 5.点击密码,添加密码 6.设置密码 7.使用快捷键“窗口键+l”锁屏,就会提示你输入密码
- Java 单例类
单例类:该类只能创建一个实例,或者说内存中只有一个实例,该类的对象引用的都是这个实例. 示例: package my_package; //定义一个单例类 class Singleton{ //使用一 ...
- 存储型XSS靶场作业
首先进入靶场:http://59.63.200.79:8082/index.php xss平台使用:xss8c 发现CMS版本号,搜索是否此版本号存在可利用漏洞: 找到存储型xss漏洞,在xss平台生 ...
- JSX 到 JS 的转换
在写react代码的时候,大部分同学应该都是写JSX.因为相比于写纯JavaScript.写JSX为我们去写组件,比写一些在JavaScript当中写类似于html结构的这种代码是要方便非常非常多的, ...
- AbsInt — 确保代码安全的性能/资源分析工具套件
德国AbsInt公司是一家安全苛求软件研发.确认.验证和认证工具链的供应商,能够为客户提供完整的确保代码安全的性能分析工具套件以及软件分析.验证.确认和编译器技术相关咨询服务.AbsI ...
- 自定义express中间件
const http = require('http') class LikeExpress { constructor() { this.middleList = [] this.routes = ...
- Windows10安装Redis过程
下载 Redis下载地址:https://github.com/microsoftarchive/redis/releases 以3.2.100版本为例,下载Redis-x64-3.2.100.zip ...
- LightOJ - 1318 - Strange Game(组合数)
链接: https://vjudge.net/problem/LightOJ-1318 题意: In a country named "Ajob Desh", people pla ...
- 百度OCR文字识别-Android安全校验
本文转载自好基友upuptop:https://blog.csdn.net/pyfysf/article/details/86438769 效果图: 如下为文章正文: 百度OCR接口使用总结:之前总结 ...
- OLED液晶屏幕(4)串口读取文字并分割,液晶屏幕显示
ESP8266-07 0.93存 液晶屏 128*64 驱动芯片 ssd1306 接线 VCC-5v GND-GND SCL-D1(SCL) SDA-D2(SDA) 安装两个库 #include & ...