图标字体的简介&使用
一、图标字体的简介
身处信息世界，我们每天都遨游在缤纷多彩的网页中。有没有那么一刻，你注意到了如下图这些可爱漂亮的图标？你是否也想在自己的网页中使用？接下来，让我们一起来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文件。
