前端页面中字体图标的使用方法

在前端页面中会经常需要用到图标。很多时候前端开发人员会根据UI设计师提供的素材直接进行引进，但是图片会占据较大的内存，尤其在移动端，不利于用户体验。那么今天就整理一下前端使用字体图标的方法和过程。
1、首先进入字体图标官网：http://www.iconfont.cn/
2、然后在图标库或者搜索栏搜索自己需要的图标,如图所示：

图1-搜索需要的图标

对应的搜索结果如图所示：

图2-搜索结果示例.png

3、鼠标指向任意一个图标，会出现如下页面，对图标可进行三个操作，三个图标分别对应①添加入库，②收藏，③下载。

图3-选中一个图标.png

我们需要的功能就是第一个，添加入库。
ps:如果想要以图片的方式直接使用图标，可点击下载，之后出现如下界面：

图4-下载字体图标.png

其中除了可以下载png格式、AI格式、还有svg格式外，还可以对图标进行编辑操作，更改其颜色和大小。
4、鼠标指向图标，选择“添加入库”功能，这时候就可以在右上角的小购物车中看到刚刚添加的图标了。

图5-加入到库.png

然后点击右上角的"购物车"，可以看到刚才加入的字体图标以及下面的功能选项。

图6-库中的字体图标.png

图7-对库中图标进行操作.png

此时我们选择下载代码，之后可以得到一个压缩包。
5、压缩包解压内容如图所示：

图8-下载的代码包内容.png

6、下面我们就可以在自己的项目中引进这其中有用的代码文件，然后轻松的使用图标了。
分析上面代码包中的文件，demo.css就相当于我们平时用的reset.css，即重置样式表。其中的3个demo_xx.html文件分别演示引进字体图标的3个方法：fontclass、symbol、unicode。我们现在多用(今天讲的也是）第一种方法，即fontclass方法，这是在三种里面相对较为简单的一种方法。

图9-三种引进字体图标的方法.png

1）首先在自己的html文件中引入iconfont.css样式表文件：

图10-在自己的项目中引入iconfont.css文件.png

代码如下：

注意此文件中有关联文件，即字体的格式文件，所以在将iconfont.css文件放入项目时，也需将另外三个字体格式文件一并放入。

图11-需要同时放入的4个文件.png

2）接着在哪需要用到此图标，就用i标签，然后设置相应的类名即可。

总结：整个的过程需要做的就是三步：
(1)将下载的压缩包中的下面四个文件放到自己的项目中去；

图12-css文件夹中放置的文件.png

(2)在需要用到字体图标的页面中引进iconfont.css文件；

(3)在使用字体图标的地方，设置相应字体的类。

设置类时，都需要设置iconfont，然后根据iconfont.css文件中最后写到的对应具体某一字体图标的类名再设置。

图13-字体图标的类名位置(在iconfont.css文件中的最后).png

这样我们就可以在自己的项目页面中看到需要的图标了。

图14-效果示例.png

　　注：上图中的星级评价部分的星星，也是字体图标。但是一开始从网上直接下载下来的颜色是灰色的，这时需要根据自己的需要进行修改。在iconfont这个类中可以通过设置font-size来控制图标的大小，在iconfont icon-wxbsousuotuiguang这个类中可以通过设置color来控制图标的颜色。
以上。