使用 Iconfont 和 SVG 绘制小图标

Iconfont 的优缺点

优点

可以任意设置大小、颜色、阴影、透明、text-stroke和background-clip:text等。

一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。

支持包括IE6在内的所有现代浏览器。

缺点

只支持单色和CSS3的渐变色

设计时间长，维护成本高

Iconfont 的使用

很容易的找到很多免费 Iconfont 服务，如 fontawesome 、阿里矢量图标库、 fontello 等。
下面以阿里的图标库为例来说明一下 Iconfont 的用法。

首先进入阿里矢量图标库首页，在正中的搜索框中输入想要的图标，也可以直接访问图标公开库，选择你需要的图标，点击加入暂存架（类似购物车），然后点击存储为项目并输入一个自定义的项目名称，如图所示：

然后在跳转到的页面中找到图标下方的代码，如本例中为 “＆＃ｘｅ600;” 记下备用，点击”获取在线链接”得到 font-face 的声明。

具体使用如下：

1	<i class="iconfont">&xe600</i>

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1460282819_0197918.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1460282819_0197918.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1460282819_0197918.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1460282819_0197918.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1460282819_0197918.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px; // 字体边缘抗锯齿
    display: block; // IE7兼容

}

也可以使用如下伪元素的方式：

1	<i class="iconfont">&xe600</i>

.iconfont {
    font-family:"iconfont";
}
.iconfont:before {
    content: "&xe600";
}

SVG 的优缺点

先说下什么是SVG：

SVG（Scalable Vector Graphics）是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

优点

不依赖分辨率，不失真，各平台兼容性好

其可访问性（盲文、声音朗读等）、可操作性、可编程性都很强

缺点

复杂度高，会减慢渲染速度（任何过度使用 DOM 的应用都不快）

SVG 的使用

SVG 基础可参考 MDN 的这篇文档：我是链接

本站中 SVG 的使用如下：

同样使用阿里矢量图标库，找到需要的图标之后点击图标 hover 之后出现的下载按钮，弹出如下图所示弹窗

可以自由修改图标颜色、大小等并可以保存为 SVG 和 PNG 格式，选择下载 SVG，使用文本编辑器打开，复制其中的内容，内联至需要的位置即可。

<a href="https://github.com/thjiang" target="_blank">
    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="20" height="20" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"><![CDATA[]]></style></defs><g class="transform-group"><g transform="scale(0.015625, 0.015625)"><path d="M64 524C64 719.602 189.356 885.926 364.113 947.017 387.65799 953 384 936.115 384 924.767L384 847.107C248.118 863.007 242.674 773.052 233.5 758.001 215 726.501 171.5 718.501 184.5 703.501 215.5 687.501 247 707.501 283.5 761.501 309.956 800.642 361.366 794.075 387.658 787.497 393.403 763.997 405.637 743.042 422.353 726.638 281.774 701.609 223 615.67 223 513.5 223 464.053 239.322 418.406 271.465 381.627 251.142 320.928 273.421 269.19 276.337 261.415 334.458 256.131 394.888 302.993 399.549 306.685 432.663 297.835 470.341 293 512.5 293 554.924 293 592.81 297.896 626.075 306.853 637.426 298.219 693.46 258.054 747.5 262.966 750.382 270.652 772.185 321.292 753.058 381.083 785.516 417.956 802 463.809 802 513.5 802 615.874 742.99 701.953 601.803 726.786 625.381 750.003 640 782.295 640 818.008L640 930.653C640.752 939.626 640 948.664978 655.086 948.665 832.344 888.962 960 721.389 960 524 960 276.576 759.424 76 512 76 264.577 76 64 276.576 64 524Z" fill="#999"></path></g></g></svg>
</a>