图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。
- 传统图标
- 字体图标
- SVG 图标
传统图标
编写图标最简单的方式就是使用一张图片，如：
<html>
<body>
图标 <img src="xxx.png" />
body>
html>
在我刚开始写页面的时候就是这样做的，感觉 so easy，直到业务变得越来越复杂，我就不得不思考以下几个问题：
- 图标需要适配多个客户端
- 图标太多需要优化
- 图标需要动态修改颜色
对于适配多个客户端的问题，设计师们通常都会给我们提供多个尺寸的设计图(@1x 图、@2x 图)，于是我们就可以根据不同的客户端来选择对应尺寸的图片。
通常使用方式是：媒体类型 或 配置 srcset。
例如：
<html>
<head>
<style>/* 使用媒体查询，为每个端适配不同尺寸的图片 */
.@media screen and (max-width: 300px) {
.img {
background-image: url("1x.png");
}
}
.@media screen and (max-width: 600px) {
.img {
background-image: url("2x.png");
}
}style>
head>
<body>
<img src="1x.png" srcset="1x.png 1x, 2x.png 2x" />
body>
html>
通过上面的方法，多客户端适配问题解决了，但我们使用了多张内容相同、尺寸不同的图标，这无疑增加了图片的数量。
随着图片的增多，图片管理就是一个问题。每一张图片都会发起一个 HTTP 请求，而浏览器并行加载同一域名下的请求是有限制的，太多的图片无法全部并行加载，就会进行排队加载，排在后面的图片也就不能及时得到渲染。
通常，解决大量图片 HTTP 请求，有两种方式：
- 雪碧图
- Base64 图
雪碧图指的是，将所有小图片合并成一张大图片。在浏览器渲染时，这张大图片只需要发起一次 HTTP 请求，然后就被浏览器缓存起来了，当再次使用该图片时，就会直接从缓存中进行读取，从而避免了发起多次 HTTP 请求。
首先，我们需要将许多小图片合成一张大图：
然后在 CSS 中进行定位。
.icon1,
.icon2,
.icon3 {
width: 54px;
height: 54px;
background: url
最低0.47元/天 解锁文章
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
