阿里巴巴fonticon字体图标的使用
很早之前就知道阿里巴巴的fonticon矢量图标库,以前是这么使用的:下载某个图标的.png格式,然后引用到项目中,通过img标签或者background来使用。当然我知道该矢量图库可以将图标转换为字体文件来使用,但是一直没有机会来使用。因为大部分时间,设计都会把图标以图片的格式准备好,我只需要做一张雪碧图,就可以很好的使用了。
下面来总结一下该字体图标的使用方法。
1.如何将字体图标下载到本地
以图说明(本次下载的是一个多色图标):
下载到本地后,是一个压缩包,解压之后,会看到下面的文件。
那3个示例网页中得到以下信息:
1. 在使用Unicode引入时,图标的Unicode编码
2. 在使用-class引入时,图标的类名
3. 各种引入方式的简单介绍
2.怎么在html页面中使用
在页面上使用时,有三种引入方式:
1.unicode引入:
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
在刚刚下载下的文件夹中找到iconfont.woff
文件,并放到你项目的根目录下。
页面中是这样的:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">@font-face {font-family:'iconfont';src:url('iconfont.eot');src:url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}i{font-size:34px !important;color:red;}</style></head><body><h1>unicode引入</h1><i class="iconfont"></i></body>
</html>
2.font-class方式:
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
在刚刚下载下的文件夹中找到iconfont.css
文件,放到你项目的任意位置,并在页面中引入该css文件。
页面中是这样的:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="iconfont.css"/><style type="text/css">i{font-size:34px !important;color:red;}</style></head><body><h1>font-class引入</h1><i class="iconfont icon-bofang-tingzhi-zanting"></i></body>
</html>
3.symbol方式:
这是一种全新的使用方式,应该说这才是未来的主流, 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
在刚刚下载下的文件夹中找到iconfont.js
文件,放到你项目的任意位置,并在页面中引入该css文件。
页面中是这样的:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
- 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
在刚刚下载下的文件夹中找到iconfont.js
文件,放到你项目的任意位置,并在页面中引入该js文件。
页面中是这样的:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="iconfont.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.icon {width:1em; height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}svg{font-size:34px !important;color:red;}</style></head><body><h1>symbol引入</h1><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang-tingzhi-zanting"></use></svg></body>
</html>
总结
以上就是使用阿里矢量图库的字体图标的三种方法,除了symbol方式可以直接使用多色图标(也就是一个图标中有多个颜色),其他的两种都不能直接使用。只能使用单色。
总的来说,还是第二种,也就是通过类名来引入更加的方便使用(个人意见)。在切换图标时,可以直接通过更换类名来实现。而且对于现在的我而言,多色图标使用频率较少,大部分时间都是在使用单色图标,就完全可以满足我的需求了。
好了,以上就是一个简单的使用过程,希望能帮到大家。
阿里巴巴fonticon字体图标的使用相关推荐
- 阿里巴巴引入字体图标的第二种方法:
阿里巴巴引入字体图标的第二种方法: 第一步:拷贝项目下面生成的fontclass代码: 首先将所选购的图标添加至项目(没有项目可新建项目),如图: 要点击查看在线链接才能生成代码 点击复制代码在新建标 ...
- 在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标 打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库 点击右上角的购物车按钮,进入库中 选择添加入项目, 选择新建项目,或者使用已有项目 ...
- 在HTML种引用阿里巴巴iconfont字体图标
概述 什么是阿里巴巴iconfont字体图标呢? iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制. 以前要引用各种图标需要使用的是图标图 ...
- 微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
- 阿里巴巴iconfont字体图标使用方法
iconfont字体图标的使用方法--超简单! 这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; ...
- 阿里巴巴矢量字体图标库的使用
一.引用线上图标库 1.登录阿里巴巴矢量图标库(可以微博登录),鼠标悬停在需要的图标,点击收藏入库(购物车图标),点击下载到本地或添加到项目 搜索你需要的图标并加入购物车 选好之后选择储存为新项目 生 ...
- 将阿里巴巴Iconfont字体图标 引入到HTML(CSS)文件中
一.打开iconfont阿里巴巴矢量图标库官方网站.找到喜欢的图标添加入库,同时建立项目,将你所选择的图标放到项目里. 二.复制 "//at..."那一串地址,将其写入在你想引用某 ...
- vue项目中使用阿里巴巴iconfont字体图标
1.把下载下的东西解压全放在vue的某个文件夹 2.在main.js引入 import './assets/iconfont/iconfont.css' 3.在需要用图标的标签比如span标签引入你想 ...
- 小米商城项目实战(二) 分类导航与字体图标
分类导航需求 小米商城官方网站: https://www.mi.com/index.html 阿里巴巴矢量字体图标库: https://www.iconfont.cn/ 项目结构 阿里巴巴矢量图标库下 ...
最新文章
- “ compiler-rt”运行时runtime库
- 生于俄罗斯的 Web 服务器王者 Nginx,现宣布俄罗斯禁止贡献!
- 目前最全面深入的Linux设备驱动程序著作
- Swift4之NSAttributedString的使用
- 请求编码和响应编码乱码原因及解决方案
- Objective-C setter和getter
- 微型计算机组装实验报告虚拟,计算机硬件的组装实验报告.doc
- 2018 Multi-University Training Contest 1 Balanced Sequence(贪心)
- 质量超高的UI素材站!推荐UI\UX设计师
- Python+OpenGL使用鼠标选择模型不同组成部分
- jquery ajax 拒绝访问,拒绝访问IE上的jQuery脚本
- Nagios 监控 SNMP 温度计
- JavaScript将焦点设置为HTML表单元素
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
- 基于Cisco CDP协议的家用路由器以及盒子的自动配置随想
- Tomcat日志配置远程rsyslog采集
- html弹窗复制,js复制弹窗美化
- 如何使用spring2.0
- map.java.opts_关于mapreduce.map.java.opts
- 基于 VIVADO 的 AM 调制解调(2)工程实现