图标字体的使用——iconfont

图标字体的使用——iconfont
什么是iconfont
iconfont 即图标字体，也叫字体图标，顾名思义，就是字体做的图标。

相对于图片图标，它有以下优点：

1. 自由的变化大小，且不会模糊（就像网页上的大号字体的标题，不会糊哦）；

2. 比图片体积小，加载快；

3. 可以任意改变颜色；

当然，它也有一些缺点：

1. 创作自己的字体图标很费时间，重构人员后期维护的成本偏高；

2. 只能被渲染成单色或者CSS3的渐变色，像下面这种是办不到的；
   

但是现在有种东西叫Svg，这是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics），不但颜色丰富，而且不会因变化大小而模糊，毕竟是矢量图。

如何使用iconfont
这里要为大家介绍的是 Iconfont-阿里巴巴矢量图标库。

地址戳这里：Iconfont-阿里巴巴矢量图标库

使用步骤：

1. 打开首页
   

2. 搜索需要的图标

3. 

搜索结果：

3. 选择所需的图标进行使用
   像图片一样使用iconfont

如果所需图标个数比较少，可以选择下载到本地使用

可以选择想要的颜色、大小和格式。

在项目中使用

可以选择把图标添加到项目进行管理

1. 先添加到库：

2. 再添加到项目：

3. 新建一个项目：
   

4. 点击确定，把图标添加到新建的项目”我的项目”中：
   

5. 添加到项目的图标有三种使用方法，右侧有官方使用指南：

这里主要介绍font class这种方法。

font class方法使用步骤

第一步：拷贝项目下面生成的fontclass代码：

第二步：用标签在html文件头部（中）引入复制的链接代码（复制的代码请粘贴在link标签的href属性中）：

第三步：挑选相应图标并获取类名：

第四步：应用于html文档中：

格式：

<i class="iconfont xxx"></i>

其中“xxx”处替换为第三步复制的类名：

显示效果：

改变图标的颜色和大小：

显示效果：

完美！