四种 ICON 的展示方式

我常常使用 https://www.iconfont.cn/ 这个网站来辅助帮助展示 icon 图标

它介绍了四种使用方式，这里我简单复述一下使用方法，并着重讲一下第 3、4 种方法

1. icon 单个使用
2. unicode 引用
3. font-class 引用
4. symbol 引用

1. icon 单个使用（偶尔用）

直接把图标下载为 png/svg 格式，然后在 html 中使用 img标签 或 background-image属性 进行展示 icon

2. unicode 引用（一般不用）

把 icon 转换为一种字体，然后使用 unicode 编码展示 icon

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
.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;
}

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

3. font-class 引用（常常用）

把 icon 转换为一种字体，然后使用 「class + 伪元素」的展示 icon

<link href="./font/iconfont.css">
<i class="iconfont icon-xxx"></i>

这种方式不满足你在有彩色 icon 的需求，但有一个方式让它像支持彩色一样，那就是「渐变」，如果让「渐变」作用于字体上，那不就是彩色了嘛，CSS 属性如下，所有字体都可以这么干

.icon-xxx{
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-image: linear-gradient(180deg, #A46DFF 0%, #8067FF 100%);
}

必须理解的是 icon 是字体，所以对字体的 CSS 属性都会生效，比如 font-weight、font-size、-webkit-text-stroke-width 等属性都会影响 icon 的变化

4. symbol 引用（常常用）

把 icon 以 svg 的方式展示，因为 svg标签 里面常常是一堆，内容太多，所以用另一种写法，引入一段 js，然后在 svg标签 里面再写入一个 use标签

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

<script src="./font/iconfont.js"></script>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

svg 支持彩色 icon，这是它最大的优点。不需要彩色的时候，我更喜欢使用 font-class 方式，因为它只需写一个 i标签 即可，是不是少复制粘贴了很多代码？嘎嘎。

这种 svg 方式也支持渐变，在实际使用中，会比较繁琐，需要先写好 defs标签 和 linearGradient标签，然后在 use 标签里引用渐变，类似下面这个样子，我一般不这么弄，渐变就去使用 font-class 方法。

<svg class="icon" aria-hidden="true">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
  <use xlink:href="#xxx" fill="url(#linear)"></use>
</svg>

「@浪里淘沙的小法师」