阿里巴巴矢量图标库-iconfont使用方式

阿里巴巴矢量图标库-iconfont使用方式
在项目开发的过程中，我们经常会使用到图标进行页面的修饰。如果使用图片，往往会遇到失真的情况，而且图片数量很多的话，页面加载也会变得很慢。所以，我们可以使用字体图标的方式来展示图标，即解决了失真的问题，也解决了图片占用资源的问题。
本篇blog主要介绍目前主流图标使用方式-iconfont的使用，话不多说，上干粮。（如有问题，欢迎指出。）
阿里官网传送门:https://www.iconfont.cn/
打开首页，会发现很有有趣而且实用的图标，看得人眼花撩人哈哈哈~~

选择自己想要的图片，添加至购物车

一、下载图标的三种方式：

（1）下载图标添加至项目。如果还没有项目，可以先创建一个，然后添加即可。

1）右上角的“下载至本地”就是下载该图标库的代码到本地，代码包括demo的html和css文件、iconfont的css、js以及各种字体文件，demo是使用说明，iconfont文件是使用这个图标库所必须的文件，可根据使用的具体方式引用相应文件（就是刚才说的下载代码那种方式，不逼逼了）。
2）进入我的项目，点击下载到本地。就可以把这图标库里的代码放在你本地了。下载的文件夹中包括了demo的html和css文件、iconfont和css、js以及各类字体文件。demo是阿里官网给出的使用说明，iconfont是本地使用图标所必需的的问题，可以根据iconfont生成对应想要的图标。

（2）下载素材。下载图标资源，可以指定颜色、大小以及格式。通常下载svg格式的素材

1）咱们放在代码中看看具体使用情况：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.iconfont{width: 50px;height: 50px;}</style>
</head>
<body><img src="../font/chuifengjibeifen3.svg" alt="icon">
</body>
</html>

↑上面是在代码中的引入实例

（3）下载代码

1）下载到本地后，解压提取里面的文件如下：

2）打开下载文件中的demo_index.html，可以看到具体图标的文件名称：

3）将其中的iconfont.css文件引入到自己的项目中，然后设置下样式，具体实例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../font/iconfont.css"><style>ul{list-style: none;}.iconfont{width: 1000px;height: 1000px;}</style>
</head>
<body><ul><li class="iconfont icon-chuifengjibeifen3"></li></ul>
</body>
</html>

然后就会发现，上面css中虽然设置了width和height，但是实际图标大小并没有发生变化。为什么呢？原来，下载的文件中iconfont.css已经给图标字体设置了大小，我们只需要改变iconfont.css中的font-size就可以改变图标的大小。

左上角的三种方式下载中的demo里就有很详尽的使用方式，在此抛砖引玉，下面直接copy下载的demo说明给各位同学看看啊哈哈哈
注意：如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件。

##Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face

@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff2') format('woff2'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用 iconfont 的样式

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

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

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

##font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

##Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.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>