icon 的用法全解

前言

前端为网页添加图标有多种方式。大概分类如下：

1. img 图片
2. background 背景
3. background 合一（雪碧图）
4. font 字体库
5. svg 图形
6. 纯 css 实现

下面一一介绍这些方法。

img 图片

img 图片法就是用 img标签加载一个图片当作图标使用。

<img width="32px" src="https://bpic.588ku.com/element_origin_min_pic/01/48/43/135744266d01f01.jpg" alt="设置">

background 背景

background 背景法是指将图标设置为某个元素的 background-url。

div.test {
  width: 32px;
  height: 32px;
  border: 1px solid red;
  background-image: url("https://bpic.588ku.com/element_origin_min_pic/01/48/43/135744266d01f01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

background 合一（雪碧图）

在用 background 背景图片制作图标的时候，由于 css 的 background有一个属性 background-position支持背景图偏移。所以可以运用这个技巧，将多个图标合成一个大图片，在渲染的时候，渲染同一个图片的不同位置。

搜索 css sprites generator 或者 css sprites 可以得到雪碧图生成工具生成，并会附带位置信息。例如： sprite-generator、spritegen 等等。

.test {
    width: 200px;
    height: 200px;
    background-image: url("./sprites.png");
    background-position: -10px -10px;
}
.test2 {
    width: 150px;
    height: 150px;
    background: url('./sprites.png') -230px -10px;
}

font 字体库

font 字体支持不同的字体库，每个字体库的字母长的都不一样，但如果将这些字母都脱离本来的样子，绘制成图标的形式呢？这就是字体设计成图标的样子，将字体当作图标来用的图标方式。
以 iconfont 为示例，采集图标后加载字体库。

iconfont 使用帮助中心

iconfont 的 unicode 引用和 font-class 引用 都是基于 font 字体库的。二者都需要先引入字体库，并使用 @font-face定义字体，最后在使用字体的地方设置 font-family为定义的字体即可。

unicode 引用 方式是直接在 html 中以写字的方式使用，由于这个字打印不出来，就直接使用该字的 unicode 编码方式渲染。

<i class="iconfont">&#x33;</i>

而 font-class 引用方式是不直接在元素内写字体，而是在元素的伪元素上写字，同样可以渲染到页面。

.icon-xxxx:before {
  content: "\e601";
}
<i class="iconfont icon-xxx"></i>

由于该种方式渲染图标的原理是运用了字体库字体可以多样化的特点，因此，实际上的图标还是字体。修改图标大小和颜色的方式就是和修改字体的方式一样。

.iconfont {
  font-size: 24px;
  color: red;
}

svg 图形

svg 图形是目前最推荐的使用方式。
上述 font 字体库加载图标的方式有一个很大的缺点就是不支持彩色图标。但 svg 支持。
svg 图标本质是运用了 svg 技术绘制图形。svg 是一种基于 xml 的标记语言，用于描述二维的矢量图形。
一个 svg 图标对应一个 svg 标签。一般类似雪碧图的方式加载全部的 svg 图标，并通过 symbol ➕ use标签的方式进行实例化引用。

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

svg 图形加载图标的方式本质是运用了 svg 标签，因此改变 svg 图标的大小颜色等均是改变 svg 标签大小的方式。例如改变颜色为 fill。

纯 css 实现

纯 css 实现的方式就是使用 css 样式硬绘制出来需要图标的样子。这种方式对于简单的图标还可以，但是复杂的图标不一定能绘制地出来。但是使用纯 css 绘制各种图标，对 css 的能力提升是有很大帮助的。

还真的有人在做这件事。css icon project 。用纯 css 绘制的。