icon发展史速览
icon
发展史
img
多张图片占用多个请求,想办法减少请求,合并图片,image sprite
background-position
/* 使用background-position来定位图标 */
缺点
1.新增图片就要改动雪碧图,不小心会影响到其他图片,导致已经写好的定位显示出错
字体库
本质是引入了一个字体文件,然后在对应位置使用unicode就可以显示该图表
unicode
优点
1.兼容IE6+
2.支持按照字体的方式去动态调整图标的大小、颜色
缺点
1.不支持多色图标
2.在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
3.语义非常弱,光看unicode码,不知道它是什么
使用方式
/* 引入font-face自定义字体 */
@font-face {
font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/* 定义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;
}
/* 使用unicode码 */
<i class="iconfont"></i>
font-class
相比unicode方式,优点就是语义更加明确,可以看见class就知道它是什么图标
使用方式
// 引入font-class文件
../font_8d5l8fzk5b87iudi.css
找到对应图标类名并使用
<i class="iconfont icon-xxx"></i>
symbol
优点
1.支持多色图标
2.可以使用CSS实现动画,不需要再使用gif
3.矢量,缩放不失真,再也不用按照不同分辨率设置不用的图标了
4.本身就是DOM规范的一部分,可以像普通DOM一样修改颜色,交互性非常强
使用方式
第一步:拷贝项目下面生成的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>
icon发展史速览的更多相关文章
- GitHub 热点速览 Vol.18:刷 LeetCode 的正确姿势
作者:HelloGitHub-小鱼干 摘要:找对路子,事半功倍,正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般,正确的学习姿势方能让人走得更远,走进大厂
- 摆脱 996——GitHub 热点速览 v.21.03
作者:HelloGitHub-小鱼干 Twitter 有位程序员总结了本周的 GitHub 中文程序员的看点:国内程序员日常--考公务员.996.抢茅台.刷算法.整健康码.在本期热点速览里,小鱼干收录 ...
- 电子检索实体书「GitHub 热点速览 v.22.12」
不知道有没有小伙伴遇到实体书快速定位指定内容的问题,凭借着记忆里很难快速翻阅到正确的页数,但 paperless-ngx 也许能帮上你的忙,它除了能将你的实体书籍电子化变成文件库里的一员之外,还能帮你 ...
- .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来
从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- .NET平台开源项目速览(13)机器学习组件Accord.NET框架功能介绍
Accord.NET Framework是在AForge.NET项目的基础上封装和进一步开发而来.因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注重与机器 ...
- .NET平台开源项目速览(1)SharpConfig配置文件读写组件
在.NET平台日常开发中,读取配置文件是一个很常见的需求.以前都是使用System.Configuration.ConfigurationSettings来操作,这个说实话,搞起来比较费劲.不知道大家 ...
- .NET平台开源项目速览(12)哈希算法集合类库HashLib
.NET的System.Security.Cryptography命名空间本身是提供加密服务,散列函数,对称与非对称加密算法等功能.实际上,大部分情况下已经满足了需求,而且.NET实现的都是目前国际上 ...
- .NET平台开源项目速览(11)KwCombinatorics排列组合使用案例(1)
今年上半年,我在KwCombinatorics系列文章中,重点介绍了KwCombinatorics组件的使用情况,其实这个组件我5年前就开始用了,非常方便,麻雀虽小五脏俱全.所以一直非常喜欢,才写了几 ...
随机推荐
- GV900 Political Explanation
GV900 Political Explanation, 2017/201830 October, 2018Homework assignment 2Due Week 7 (13 November)W ...
- Java的POJO和JavaBean的区别
POJO Plain Ordinary Java Object,即简单的java对象. 特点 需要有一些 private 的参数,以及针对参数的 setter 和 getter 方法来访问这些参数. ...
- Visual Studio 语法高亮插件推荐
编辑器 GItHub:https://github.com/Art-Stea1th/Enhanced-Syntax-Highlighting Visual Studio Marketplace:htt ...
- mysql参数之innodb_buffer_pool_size大小设置
用于缓存索引和数据的内存大小,这个当然是越多越好, 数据读写在内存中非常快, 减少了对磁盘的读写. 当数据提交或满足检查点条件后才一次性将内存数据刷新到磁盘中.然而内存还有操作系统或数据库其他进程使用 ...
- WPF 选择文件选择文件夹
namespace Microsoft.Win32 选择文件: if (string.IsNullOrEmpty(folderInitialDirectory)) { folderInitialDir ...
- 排序算法Java代码实现(二)—— 冒泡排序
本篇内容: 冒泡排序 冒泡排序 算法思想: 冒泡排序的原理是:从左到右,相邻元素进行比较. 每次比较一轮,就会找到序列中最大的一个或最小的一个.这个数就会从序列的最右边冒出来. 代码实现: /** * ...
- css sprite responsive实现探究
在做web app前端设计时,为了减少http的请求,提高系统响应时间,有一个非常常见的优化措施是:将所有用到的静态的图片通过合并形成一个sprite.png,并且配合background-posit ...
- jmeter实操及性能测试基础知识整理 - 不断更新
主要基于jmetet工具 有任何疑问直接留言,可以相互讨论 线程组菜单: 线程数:并发数量Rame-Up时间(秒):多久跑完线程数,比如线程是10,Rame-Up时间是10秒,就是10秒内跑完10个线 ...
- jQuery遍历 - 过滤first(),last()和eq()使用
jQuery遍历 - 过滤最基本的过滤方法是first(),last()和eq(),它们允许您根据元素在一组元素中的位置选择特定元素. 其他过滤方法(如filter()和not())允许您选择与特定条 ...
- vue中使用axios进行ajax请求数据(跨域配置)
npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...