<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 

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

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

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

字体-Font

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

讯享网

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

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

字体的工作原理

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

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

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

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

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

字体图标的原理

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

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

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

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

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

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

字体图标的优缺点

优点：

• 借助字体图标，我们可以如同操作文字一样操作字体图标。如，颜色的切换、大小的改变。
• 可以将多个图标整合到一个字体文件中，从而减少网页的请求次数。字体图标是“雪碧图”的良好替代品。相较于“雪碧图”，字体图标的使用更加方便、简单、快捷。
• 对字体图标进行放大不会出现失真、缩小不会浪费掉像素点

缺点：

• 由于字体图标本质上就是文字，所以字体图标不能像图片那样有着丰富多彩的颜色，它只能是单色或者渐变色。
• 字体图标不能像图片一样预览，只能在页面上渲染出来后才能看到具体的形状。

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

第一步：其他图片转为 svg 格式图片

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

• https://www.vectorizer.io/uploads/
• https://www.jinaconvert.com/cn/convert-to-svg.php

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

第二步：svg 图片生成为字体图标

这里推荐两个网站

• IcoMoon
• Iconfont-阿里巴巴矢量图标库

IcoMoon 使用介绍

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

1. 首先，进入 IcoMoon 首页，点击右上角的紫色按钮“IcoMoon App”，进入“项目管理”页面
   
2. 点击左上角的菜单按钮，选择“New Empty Set”，新建一个新的图标集合

   

3. 点击新建图标集合(Set)的右上角菜单，选择“Import to Set”，上传你的 svg 图片
   
4. 点击上传成功的图片进行选中操作，然后点击底部的浮动菜单栏中的“Generate Font”，进入字体图标生成页

   

5. 在字体图标生成页设置class等（也可以直接使用默认的）
6. 点击底部的浮动菜单的“Download”按钮，即可生成字体图标并下载到本地。
   

Iconfont-阿里巴巴矢量图标库

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

步骤如下：

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

   

   

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

   

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

   

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

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

• 将字体添加到项目中
• 通过 CSS 将字体导入项目,并配置相应的 CSS class，
• 将 CSS 引用到项目中
• 通过 class 在 html 中添加字体图标

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

我们只需要将和复制到项目即可。

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

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

字体的 CSS 代码的说明

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

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

讯享网

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

字体图标在 HTML 中使用写法解析

添加多个字体文件

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

1. 多套字体分别单独引入
2. 将每套字体的css合并到一个文件中

   讯享网

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

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

• Unicode
• Font class
• Symbol

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

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

• 字体
• 计算机原理
• 二进制
• Font Awesome
• @font-face
• CSS3 @font-face属性
• font-smoothing