阿里矢量图标库的使用方法
官网
1、注册账号
2、寻找图标,添加至购物车,注意尽量选取同一套图标库的图标。
3、打开购物车将图标添加至项目(或者点击右边+号,新建项目)。
4、找到我的项目,使用线上链接代码或者下载至本地
使用线上图标
方法一:unicode引用
1、在base.css文件写入字体图标代码
@font-face {font-family: 'iconfont';/* project id 1968940 */src: url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.eot');src: url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.woff2') format('woff2'),url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.woff') format('woff'),url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.ttf') format('truetype'),url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.svg#iconfont') format('svg');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
2、在main.js全局配置引用base.css
import '@/css/base.css'
3、组件中使用
这里的
就是字体图标对应的Unicode
<span class="iconfont"style="color:red"></span>
<i class="iconfont"></i>
4、优缺点
1、兼容性最好,支持ie6+,及所有现代浏览器。
2、支持按字体的方式去动态调整图标大小,颜色等等。
3、但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。(彩色图标建议使用symbol引用方式)
方法二:font-class引用
1、全局引入css外联
在public
文件夹下的index.html
文件引入css
外联
2、组件中使用
这里的icon-undo
就是字体图标对应的class
<button type="button"class="btn btn-primary"><i class="iconfont icon-undo"style="color:red"></i>重置
</button>
3、优缺点
1、兼容性良好,支持ie8+,及所有现代浏览器。
2、相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
3、因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
4、不过因为本质上还是使用的字体,所以多色图标还是不支持的。
方法三:symbol引用
1、全局引入js外联以及配置样式
在public
文件夹下的index.html
文件引入js
外联以及配置全局css
样式
2、组件中使用
这里的#iconbaoguanren-73
就是字体图标对应的symbol
<button type="button"class="btn btn-primary"><svg class="icon"aria-hidden="true"><use xlink:href="#iconbaoguanren-73"></use></svg></button>
3、优缺点
1、支持多色图标了,不再受单色限制。
2、通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
3、兼容性较差,支持 ie9+,及现代浏览器。
4、浏览器渲染svg的性能一般,还不如png。
使用下载的图标
下载图标,解压缩包,得到如下文件
方法一:unicode方式
1、将解压后的文件,如下框选中的五个文件拷贝至项目中的font
文件夹中
2、在base.css文件写入字体图标代码
本地文件引用
@font-face {font-family: 'iconfont';src: url('../font/iconfont.eot');src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),url('../font/iconfont.woff2') format('woff2'),url('../font/iconfont.woff') format('woff'),url('../font/iconfont.ttf') format('truetype'),url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
与线上使用相比,仅仅是src变成了本地链接,剩下的步骤是一样的
3、在main.js全局配置引用base.css
4、组件中使用
这里的
就是字体图标对应的Unicode
<span class="iconfont"style="color:red"></span>
<i class="iconfont"></i>
方法二:font-class
看解压文件demo_index.html
方法三:symbol
看解压文件demo_index.html
ant design of vue自定义字体图标
我的博客
阿里矢量图标库的使用方法相关推荐
- 在uni-app里面怎么引入阿里矢量图标库?
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考 在图 ...
- uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...
- vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
- 【sciter】:sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库 步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存 步骤三:点击 Font cla ...
- Vue项目中,引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
- 使用阿里矢量图标的三种方法
将你要使用的icon图标下载到本地 fontclass方式引用: 引入下载文件中的css文件与js文件 第二张方式symbol方式引用: 引用第一步 引用完成 第三张方法 三.unicode引用 第一 ...
- vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
- 微信小程序自定义组件使用阿里矢量图标库图标
有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式. 测试了一番,直接传递class参数是无效的,那我们怎么做呢? 开始实践 仔细查阅了官方文档,发现是可以的. 我们首先在组件 ...
- uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...
- 如何使用阿里巴巴矢量图标库,创建自己的svg图标库(iview ts)
一.在阿里矢量图标库创建自己的项目 点击上传图标至项目 点击下载至本地 就会获得对应的iconfont文件夹 二.将文件夹放在 三.在项目的main.ts中加入 import '@/assets/ic ...
最新文章
- Java 寻找幸运数
- HBase解决海量图片存储方案
- 【CASS精品教程】CASS9.1等高线的绘制完整案例教程
- js中图片获取src的正则
- 基础知识—数据类型-数据的输出与输入
- HWDB数据集gnt格式转为png格式
- NOIp2018集训test-10-20 (bike day6)
- 【Android工具】更新Yandex有道云笔记网页剪辑插件测试正常!可以安装PCchrome插件的手机浏览器!...
- Xcode 之真机调试
- 万用表怎么测电池内阻_万用表怎么测量电阻
- 【容器】kubectl|K8S常用命令总结|crictl管理命令
- QLabel实现自适应图片大小(可鼠标右击全屏)
- Shopee店铺装修是什么?怎么做到效果翻倍?
- DIY个人智能家庭网关—— 路由器篇之安装python
- linux卸载 bind,Linux CentOS中 BT下载客户端 安装及卸载方法 Transmission
- 0.HDFS分布式文件系统
- 【正式发布】AD9361+ZYNQ/K7软件无线电案例|适配Zynq-7045/7100、Kintex-7评估板
- 服务器npc修改,梦幻古龙服务端NPC对话修改工具与教程
- php 自动关键词,Php实现自动获取关键词的分析
- 如何自己制作CHM文件
热门文章
- 空间计量:地理加权回归模型-(GWR)-参数估计
- win10同步服务器文件夹,和彩云如何设置同步文件夹?
- 阿拉伯文字库 阿拉伯语字库 阿拉伯 字库 变形组合算法
- Minitab散点图技巧
- 用友U8自定义按钮开发
- C 语言中 bzero()函数的使用
- 异贝,通过移动互联网技术,为中小微实体企业联盟、线上链接、线上线下自定义营销方案推送。案例28
- 2021华为软挑赛题_思路分析——实时更新,做多少更多少(六)
- 【Arduino实验17 L298N 电机驱动模块】
- 漫画算法python版下载_漫画算法-小灰的算法之旅.pdf