阿里巴巴iconfont的使用方法

为什么要使用iconfont?
iconfont就是把图标用字体的方式呈现,其优点在于以下几个方面:

可以通过css的样式改变其颜色
相对于图片来说,具有更高的分辨率
更小的存储
集结了大量优秀的图标作品，不用再切图或者P图了

缺点:浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持

接下来，我们就一起看看怎么具体使用iconfont图标库到我们的网站项目中。
首先，进入阿里巴巴iconfont，如果你要想在自己项目中引用这些图标，我强烈建议你登陆，可以使用GitHub或者新浪微博账号，这样也方便你管理你的图标项目。

登录以后，搜索自己需要的资源，然后直接下载使用，或者建立图标库然后再使用。
选择需要的图标，然后可以执行三种操作：添加入库、收藏或者直接下载，可以根据自己的实际情况来选择相应操作。

如果你是需要很多图标的话并且需要运用到网站上，我建议你在这里选择添加入库，操作完可以看到图标已经添加进右上角的购物车里了。
我们点击“图标管理”-“我的项目”，可以专门创建一个自己的项目。

我们把所需要的图标全部添加进购物车内，然后添加到项目，再下载到本地。

从上图中我们也可以看到直接在线引用，这样就不必下载到本地了，但是这样却不利于我们进行本地化的管理与优化，所以在此我选择下载到本地。

我们先解压出来

其中demo_index.html是使用说明，我们点击即可看到说明，所有带有’iconfont’字样的文件都是使用这个图标库所必须的文件，可根据使用的具体方式引用相应文件。
一共包括Unicode、Fontclass以及Symbol：三种使用的方式。这三种方式的不同在说明上已经有了，所以自己查看即可，我便不多说了。
至于这三种方式，你应该选择哪种，这完全取决于你个人。而且在我看来，三种方式各有优劣(也许是我没经过前端的系统训练，所以看不出来吧)
好了，说了那么多。我下面演示一下怎么在自己的网页中引用。
以我个人做的导航页项目为例进行演示，引用方式为Font class。我只以部分代码为例进行演示，但是你只要稍微懂点前端知识，肯定知道怎么用。我在这里只是提供了一种引用的方式，至于你如何布局，如何设计，如何优化这些都不在本文的讨论范围之中。
首先把iconfont.css复制到你工程的css文件夹。

首先应该做的是在HTML的头部引用iconfont.css文件。
e.g.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/iconfont.css">
</head>

而我们在项目中使用的时候，只需要按照下例即可。挑选相应图标并获取类名，应用于页面：

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

下图只是我截取的部分代码示图

类名就是你demo_index.html文件中的以.icon开头的，我们只需要把”.icon-“去掉，然后复制替换xxx到我们需要使用图标的位置即可。
下图红线圈中的即是类名

好的，接下来就是见证奇迹的时刻，在本地查看一下是否已经成功引用

这是我做的导航页的侧边栏的一部分，和上方的代码保持一致。在此只是给各位演示一下效果，并不做他用。
我个人认为Font class的引用方式是最简单易用的。我在此只是提供一种简单的引用图标的方法而已，各位完全可以根据说明自己定制。