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. Zabbix设置自定义监控项之——监控tcp连接状态

    目录 一.用户自定义参数 二.配置 监控 TCP 连接状态 在实际监控中,除了官方自带的一些监控项,我们很多时候有一些定制化监控,比如特定的服务.TCP 连接状态等等,这时候就需要自定义监控项.自定义 ...

  2. SAP MM模块相关透明表收集

    物料表 MCHA 批次表(批次.评估类型 工厂物料) MARA 查看物料数据(发票名称.创建时间.人员) MARC 物料数据查询(利润中心.状态.在途) MAKT 查看物料描述 MKPF 物料抬头 M ...

  3. python语法01

    在某.py文件中调用其他.py文件中的内容. 全局变量的使用. 线程的使用. if name == 'main': 的作用 新建两个python脚本文件 f1File.py ""& ...

  4. 基于Task定时检测网络本地网络状况

    首先我们需要使用winInet.dll中的InternetGetConnectedState方法来检测本地是否连接网络,然后再通过ping的方式来获取网络状况. 然后我们采用Task来开辟一个线程来定 ...

  5. JDK1.8新特性——Optional类

    JDK1.8新特性——Optional类 摘要:本文主要学习了JDK1.8新增加的Optional类. 部分内容来自以下博客: https://www.cnblogs.com/1ning/p/9140 ...

  6. ICSharpCode.SharpZipLib 中文乱码问题

    今天在调用ICSharpCode.SharpZipLib解压zip文件时出现了中文文件乱码的问题. 解决过程如下: 1.判断是否压缩包本身问题.经查zip文件夹在本地直接解压打开时正确的中文名称,所以 ...

  7. ASP.NET Core系列:依赖注入

    1. 控制反转(IoC) 控制反转(Inversion of Control,IoC),是面向对象编程中的一种设计原则,用来降低代码之间的耦合度. 1.1 依赖倒置 依赖原则: (1)高层次的模块不应 ...

  8. Redis入门学习(二):下载安装

    Linux操作系统 Download, extract and compile Redis with: $ wget http://download.redis.io/releases/redis-4 ...

  9. Windows远程连接其他主机

    一.远程主机开启允许被远程连接 1. 右键计算机 --> 属性 --> 远程设置 2. 默认是不允许远程桌面的, 在这里我们勾选开启 3. 远程主机设置完成 二.客户机连接设置 1. wi ...

  10. Centos7 下安装Redis4.0.6

    一.安装redis 第一步:下载redis安装包 wget http://download.redis.io/releases/redis-4.0.6.tar.gz [root@iZwz991stxd ...