iconfont阿里爸爸做的开源图库
iconfont 三种使用姿势
1.unicode格式
优点
- 兼容性最好,支持ie6+
- 支持按字体的方式去动态调整图标大小,颜色等等
缺点
- 不支持多色图标
- 在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
使用方法:
第一步:引入自定义字体 `font-face
@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的样式
.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 class="iconfont">3</i>
2.font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
第一步:拷贝项目下面生成的fontclass代码:
引入 ./iconfont.css
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
相对于unicode 它的修改更加的方便与直观。但也有一个大坑,之前楼主一个项目中用到了两组font-class 由于没有做好命名空间,所有的class都是放在.iconfont 命名空间下的,一上线引发了各种雪崩问题,修改了半天,所以使用font-class一定要注意命名空间的问题。
3.symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 支持像字体那样通过font-size,color来调整样式。
- 支持 ie9+
- 可利用CSS实现动画。
- 减少HTTP请求。
- 矢量,缩放不失真
- 可以很精细的控制SVG图标的每一部分
第一步:拷贝项目下面生成的symbol代码:
引入 ./iconfont.js
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
使用svg-icon的好处是再也不用发送woff|eot|ttf| 这些很多个字体库请求了,我所有的svg都可以内联在html内。
官网参考地址: http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
vue的使用实例, 有兴趣可以去看看
相关地址: https://juejin.im/post/59bb864b5188257e7a427c09?utm_source=gold_browser_extension
iconfont阿里爸爸做的开源图库的更多相关文章
- Atitit.为什么小公司也要做高大上开源项目
Atitit.为什么小公司也要做高大上开源项目 1. 为什么手头有很多加急的事情还要做高大上开源项目??1 2. 从长远看,发展 高大上开源项目计划对于解决我们在应急项目正面临着的种种严峻问题也大有裨 ...
- 做个开源博客学习Vite2 + Vue3 (一)搭建项目
前言 不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢. 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳. 现在vite2 ...
- Iconfont 阿里图库使用(小程序和H5)
前言 现在前端发展的太快,前端优化也是,图片也是被近2年来比较火的就是阿里图库取代了,不管小程序还是H5 都在用 好了,那么就介绍下如何使用吧 阿里图库 当然需要你到阿里官网 http://www.i ...
- react使用阿里爸爸的iconfont时,不展示的问题
选择使用Unicode时: 正常使用如下,显示也是正常: <i className="iconfont"></i> 使用map去循环时,需将原本的,改成 ...
- 阿里宣布Atlas正式开源:带你重返App开发的田园时代
继Weex之后,阿里在移动技术领域又有开源大动作. 3月13日,手机淘宝安卓客户端容器化框架Atlas正式宣布开源(https://github.com/alibaba/atlas ).Atlas由阿 ...
- iconfont阿里字体图标的使用方法
我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...
- 快速了解阿里微服务热门开源分布式事务框架——Seata
一.Seata 概述 Seata 是 Simple Extensible Autonomous Transaction Architecture 的简写,由 feascar 改名而来. Seata 是 ...
- 测试开发:推荐一款阿里最新 Python 自动化开源工具!
大家好,我是麦小米,是狂师老师全栈测开训练营中的一名学员. 如果之前做过iOS自动化的同学相信都知道,一直以来,iOS自动化的实现&执行都必须依赖 Mac 系统,其主要原因是因为需要通过 xc ...
- iconfont阿里妈妈前端小图标使用方法详解
图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...
随机推荐
- VMWare虚拟机安装创建虚拟机的使用教程
VMWare虚拟机安装创建虚拟机的使用教程 在配置虚拟机之前需要安装它,VMWare软件的安装过程比较简单,在安装在之前应该先看下说明文档.下面以VMWare Workstation6.5虚拟机 ...
- salt '*' state.highstate 报错找不到文件,环境如下No Top file or master_tops data matches found.
salt '*' state.highstate 报错找不到文件,环境如下No Top file or master_tops data matches found. file_roots: b ...
- Qt信号槽的一些事
注:此文是站在Qt5的角度说的,对于Qt4部分是不适用的. 1.先说Qt信号槽的几种连接方式和执行方式. 1)Qt信号槽给出了五种连接方式: Qt::AutoConnection 0 自动连接:默认的 ...
- 多媒体开发之h264中的sps---sps信息提取之分辨率宽高提取2
-------------------author:pkf -----------------------------time:2015-8-20 -------------------------- ...
- (转)Invalidate、RedrawWindow与UpdateWindow的区别
一:什么时候才会发生重绘窗口的消息? 当需要更新或重新绘制窗口的外观时,应用程序就会发送WM_PAINT消息.对窗口进行重新绘制. 二:Invalidate() -- RedrawWindow() ...
- node.js执行shell命令
nodejs功能强大且多样,不只是可以实现 服务器端 与 客户端 的实时通讯,另一个功能是用来执行shell命令 首先,引入子进程模块 var process = require('child_pro ...
- Java 阻塞
对于用ServerSocket 及 Socket 编写的服务器程序和客户程序, 他们在运行过程中常常会阻塞. 例如, 当一个线程执行 ServerSocket 的accept() 方法时, 假如没有客 ...
- Linux 获取登录者IP
在linux中有时须要获得登录者的IP,这里有两种方法.先使用who am i 获取登录IP,然后截取字符串: 1.awk截取,sed替换 who am i | awk '{print $5}' | ...
- Pacbio 纯三代组装复活草基因组
对于植物等真核生物基因组来说,重复序列, 多倍体,高杂合度等特征在利用二代数据进行组装的时候都会有很大的问题: 利用二代数据组装出来的基因组,大多达不到完成图的水准,通常只是覆盖到编码蛋白的基因区域, ...
- Ubuntu Server 下的网络配置
$ ifconfig 配置DHCP客户端$ sudo vi /etc/network/interfaces加入 iface eth0 inet dhcp 配置静态IP地址$ sudo vi /etc/ ...