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发展史速览的更多相关文章

  1. GitHub 热点速览 Vol.18:刷 LeetCode 的正确姿势

    作者:HelloGitHub-小鱼干 摘要:找对路子,事半功倍,正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般,正确的学习姿势方能让人走得更远,走进大厂

  2. 摆脱 996——GitHub 热点速览 v.21.03

    作者:HelloGitHub-小鱼干 Twitter 有位程序员总结了本周的 GitHub 中文程序员的看点:国内程序员日常--考公务员.996.抢茅台.刷算法.整健康码.在本期热点速览里,小鱼干收录 ...

  3. 电子检索实体书「GitHub 热点速览 v.22.12」

    不知道有没有小伙伴遇到实体书快速定位指定内容的问题,凭借着记忆里很难快速翻阅到正确的页数,但 paperless-ngx 也许能帮上你的忙,它除了能将你的实体书籍电子化变成文件库里的一员之外,还能帮你 ...

  4. .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来

    从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...

  5. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  6. .NET平台开源项目速览(13)机器学习组件Accord.NET框架功能介绍

    Accord.NET Framework是在AForge.NET项目的基础上封装和进一步开发而来.因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注重与机器 ...

  7. .NET平台开源项目速览(1)SharpConfig配置文件读写组件

    在.NET平台日常开发中,读取配置文件是一个很常见的需求.以前都是使用System.Configuration.ConfigurationSettings来操作,这个说实话,搞起来比较费劲.不知道大家 ...

  8. .NET平台开源项目速览(12)哈希算法集合类库HashLib

    .NET的System.Security.Cryptography命名空间本身是提供加密服务,散列函数,对称与非对称加密算法等功能.实际上,大部分情况下已经满足了需求,而且.NET实现的都是目前国际上 ...

  9. .NET平台开源项目速览(11)KwCombinatorics排列组合使用案例(1)

    今年上半年,我在KwCombinatorics系列文章中,重点介绍了KwCombinatorics组件的使用情况,其实这个组件我5年前就开始用了,非常方便,麻雀虽小五脏俱全.所以一直非常喜欢,才写了几 ...

随机推荐

  1. GV900 Political Explanation

    GV900 Political Explanation, 2017/201830 October, 2018Homework assignment 2Due Week 7 (13 November)W ...

  2. Java的POJO和JavaBean的区别

    POJO Plain Ordinary Java Object,即简单的java对象. 特点 需要有一些 private 的参数,以及针对参数的 setter 和 getter 方法来访问这些参数. ...

  3. Visual Studio 语法高亮插件推荐

    编辑器 GItHub:https://github.com/Art-Stea1th/Enhanced-Syntax-Highlighting Visual Studio Marketplace:htt ...

  4. mysql参数之innodb_buffer_pool_size大小设置

    用于缓存索引和数据的内存大小,这个当然是越多越好, 数据读写在内存中非常快, 减少了对磁盘的读写. 当数据提交或满足检查点条件后才一次性将内存数据刷新到磁盘中.然而内存还有操作系统或数据库其他进程使用 ...

  5. WPF 选择文件选择文件夹

    namespace Microsoft.Win32 选择文件: if (string.IsNullOrEmpty(folderInitialDirectory)) { folderInitialDir ...

  6. 排序算法Java代码实现(二)—— 冒泡排序

    本篇内容: 冒泡排序 冒泡排序 算法思想: 冒泡排序的原理是:从左到右,相邻元素进行比较. 每次比较一轮,就会找到序列中最大的一个或最小的一个.这个数就会从序列的最右边冒出来. 代码实现: /** * ...

  7. css sprite responsive实现探究

    在做web app前端设计时,为了减少http的请求,提高系统响应时间,有一个非常常见的优化措施是:将所有用到的静态的图片通过合并形成一个sprite.png,并且配合background-posit ...

  8. jmeter实操及性能测试基础知识整理 - 不断更新

    主要基于jmetet工具 有任何疑问直接留言,可以相互讨论 线程组菜单: 线程数:并发数量Rame-Up时间(秒):多久跑完线程数,比如线程是10,Rame-Up时间是10秒,就是10秒内跑完10个线 ...

  9. jQuery遍历 - 过滤first(),last()和eq()使用

    jQuery遍历 - 过滤最基本的过滤方法是first(),last()和eq(),它们允许您根据元素在一组元素中的位置选择特定元素. 其他过滤方法(如filter()和not())允许您选择与特定条 ...

  10. vue中使用axios进行ajax请求数据(跨域配置)

    npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...