图标字体的简介&使用

图标字体的简介&使用

一、图标字体的简介

身处信息世界，我们每天都遨游在缤纷多彩的网页中。有没有那么一刻，你注意到了如下图这些可爱漂亮的图标？你是否也想在自己的网页中使用？接下来，让我们一起来get这项技能吧！<开心plus>

正所谓：“知己知彼百战不殆”，学技能也是一样，想要学好一项技能首先当然要懂其原理。那么何为图标字体呢？

在我理解中图标字体就是在网页中经常需要使用的一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活。

所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们可以通过字体的形式来使用图标。

怎么制作图标是设计师的工作，我们的工作就是使用这些设计好的图标字体！！！

二、fontawesome使用步骤

1、下载

下载地址：https://fontawesome.com/

点击下图椭圆框中的 Star for Free。

下滑页面找到下图椭圆框中的Download。

2、解压

文件下载到自己的文件夹中，找到下载好的fontawesome压缩包，将此压缩包解压至当前文件夹。

3、将CSS和webfonts移动到项目中

将解压好的文件夹打开后找到以下两项内容，将这两项内容复制到Visual Studio Code 的工作文件夹内，方便后面我们使用**（！！！注意：这两个文件必须放在同一级目录下）**。

4、将all.css引入到网页中

在头文件中使用link来引入all.css（注意：all.css是没有压缩过的资源）。

三、图标字体的使用方法

1、直接通过类名来使用

此处，class里面的fas请具体参考图标手册，有时也可用fab。

2、通过实体来使用

3、通过伪元素来使用

步骤：

第一步：找到要设置图标的元素通过before或after选中；

第二步：在content中设置字体图标编码；

第三步：设置字体图标样式

四、效果展示

下面就是根据上面的步骤操作后网页出现的效果，以供大家参考！

五、小提示

以上提到的编号可以在图标手册中找到，此文章仅参考了Zeal工具书中的Font Awesome文件。