说起字体图标，那就不得不提及 Font Awesome 了。相信大家都用过 Font Awesome 吧！只要我们在项目中引入 Font Awesome，通过给元素标签设置对应的class，就可以在页面上显示出图片来。是不是很神奇很方便呢！

要想了解 Font Awesome 为什么能做到这样的效果，我们就需要去了解字体图标。实际上，Font Awesome 就是一个字体图标库。

在讲字体图标前，我们要先看一下字体-Font。

说到字体，我们优先想到的场景可能是在编写 word 文档时，通过设定不同的字体来让一个文字拥有不一样的“外观”。如下：

改变字体，就可以改变文字的外观。这是大家公认的。

那字体是如何让文字表现出不同的“外观”的呢？这就需要进一步了解字体的工作原理了。

如果对《计算机原理》所了解，那你应该知道：在计算机中，所有的数据都是以二进制代码的形式表示。所以，文字在计算机中实际上是一串二进制的编码。

非常粗浅的概况计算机显示文字的流程：

当计算机要显示文字时，就会拿着文字的编码到字体（font）中查找对应的字形（glyph），然后在屏幕中输出查找出来的字形（glyph）。

通过对计算机文字显示流程的了解，我们可以推测出：字体实际是一个“编码-字形（glyph）”映射表。

所以，只要我们为文字编码设计不同的**字形（glyph）**就可以让文字表现出来不同的外观了。

Font Awesome 官网对自己有这样一段描述：

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Font Awesome 通过这段话明确指出了自己本身也是一种字体（font）。

其实字体图标是一种特殊字体。

前面我们已经明确了：字体是一个“编码-字形（glyph）”映射表，字形（glyph）是单个字符的外观形态。如果我们把字形设计成想要图标。那么我们就可以像使用文字一样使用图标了。

字体图标的本质：字体图标是一种特殊的字体，这种字体是一个“编码-图标字形（glyph）”的映射表。

优点：

缺点：

由于字体图标本质上就是文字，所以字体图标不能像图片那样有着丰富多彩的颜色，它只能是单色或者渐变色。

字体图标不能像图片一样预览，只能在页面上渲染出来后才能看到具体的形状。

图片生成字体图标，只支持 svg 格式的图片。如果原图的格式不是svg，需要先将图片转为svg格式。

将其他格式的图片转为 svg 图片的方法在有网上有许多网站提供这个功能。如

此外，我们还可以借助 ps 实现格式的转换。

这里推荐两个网站

IcoMoon 是一个外国网站，可能速度有点慢，不过IcoMoon 有个好处就是不用注册也可以直接使用。

首先，进入 IcoMoon 首页，点击右上角的紫色按钮“IcoMoon App”，进入“项目管理”页面

点击左上角的菜单按钮，选择“New Empty Set”，新建一个新的图标集合

点击新建图标集合(Set)的右上角菜单，选择“Import to Set”，上传你的 svg 图片

点击上传成功的图片进行选中操作，然后点击底部的浮动菜单栏中的“Generate Font”，进入字体图标生成页

在字体图标生成页设置class等（也可以直接使用默认的）

点击底部的浮动菜单的“Download”按钮，即可生成字体图标并下载到本地。

Iconfont 是我们国内的网站，是一个社区网站，在上面有许多优质好看的非商用免费图标。要想使用 IconFont，必须要注册一个账号。

步骤如下：

进入 Iconfont 首页，登录注册。点击右上角的“上传”图标进入上传页面

上传 svg 图片

鼠标浮动到你上传成功的图片，在弹出的菜单中点击”购物车“图标选项

打开右侧的”购物车“抽屉弹窗，点击底部的”下载代码“按钮，即可生成字体图标，并下载成功。

现在我们已经拿到了字体图标源码，接下来就是要在项目使用字体图标了。

字体图标的使用只要四步即可：

其实，在下载好的字体图标文件中已经替我们完成了二步，我们只需将主要的文件复制进项目中即可。这里的主要文件主要有两种，字体文件以及css。下面以 Iconfont 导出的字体图标为例：

我们只需要将iconfont.css和iconfont.ttf复制到项目即可。

注意：尽管我们不需要在项目中添加Iconfont.json文件就可以正常使用字体图标了。但是为了便于以后的维护以及查找，建议一同将iconfont.json复制到项目中。

接下来，我们只需要在 HTML 中引入iconfont.css就可以使用这个字体里面的字体图标了。

一般的，我们不需要对字体的 CSS 代码做任何改动。或者应该说，最好不要做改动。因为如果改动不对，就会造成字体图标的失效。但是了解里面的配置，以及哪些东西可以改动，也是很有必要的。

下面，我们以iconfont.css 为例。看看里面到底长什么样子。

通过上面的 CSS 说明，我们有了大致的理解。同时，我们也可以推断出如何在 HTML 中使用字体图标了

有些时候，我们可能需要在项目中添加多个字体文件。这时候有两种处理方法：

多套字体分别单独引入

将每套字体的css合并到一个文件中

注意：尽管可以添加多个字体文件，不过不建议这样做。因为字体文件过多，就会增加静态资源的请求次数。应该将所有的字体图标合并生成为一个字体文件。

以上就是关于字体图标的解析了。其实关于字体的图标的使用方法，在下载的文件中也有案例展示出来的。例如 Iconfont 的 demo_index.html 文件。在浏览器打开后，你就可以看到上面给出了当前字体文件的使用方法。而且还给出了三种使用方法：

因为 Font class 方法是目前使用最为广泛的的，且大多数的UI组件框架也是使用这种方法，所以本文就只讲了 Font class 方法。如果对那两种比较感兴趣，可以自行了解。

希望这篇文章能帮助你。其中可能存在错误点，见谅。