本篇文章主要基于hexo的butterfly配置说明教程以及一篇介绍fas，fab等内容的文章，记录作者自身的学习笔记以及心得

问题引入

我在学习hexo butterfly主题配置教程时候，发现了如下一个奇怪的问题，位于Butterfly 安裝文檔(三) 主題配置-1中
icon部分配图错误

根据教程的指引，fas fa-envelope: mailto:xxxxxx@gmail.com || Email中的fas fa-envelope是一个图标名，随后教程又贴心的放上来一张网页截图，告诉你图标名可以在这里寻找。细心的读者可能发现到了，这张网页截图中不正好有一个现成的图标名fa-address-book。于是我测试性的修改代码为fa-address-book: mailto:xxxxxx@gmail.com || Email,但是却发现图标没有显示。这时我发现到了教程中，这个网页截图中细心地为读者在关键内容处标注了红色框框，于是我又把代码修改为fa fa-address-book: mailto:xxxxxx@gmail.com || Email,刷新页面后依旧没有图标的踪影，这是什么情况？难道教程中提供的这个网页截图是错误的吗？

鉴于此，我经过一番搜索，最终还是找到了网页截图的出处网页(点击跳转),如上图。在这个网页提供的图标当中，我随便测试了几个,例如fa fa-address-card，fa fa-etsy等，在我的博客网页上都没法显示出对应的图标。

于是我又回到教程当中，对比了目前教程提供的fab fa-github,fas fa-envelope以及fa fa-address-book三个图标名，我发现到标签名的前缀fa,fas,fab各不相同，于是我依次尝试了fas fa-address-book和fab fa-address-book终于发现fas fa-address-book这个图标名能够成功显示出图标。

经历这一番搜索，我不禁有所疑问，对于像作者我这样的新手而言，怎么判断什么时候该使用fas什么时候该使用fab呢？是否还存在其他的前缀？这些前缀都表达什么含义？

于是我带着这些问题，再次进行一轮长时间的资料搜索。

详解font_awesome的icon图标名前缀含义

这部分主要参考于font-awesome-icon-style-classes

概述

font_awesome的icon图标名前缀总共有六种，分别为fa，fas，fab，fad，far和fal，下面来一一介绍。

前缀fa

对于所有font awesome v5版本以前的图标，icon图标的前缀都是fa。例如教程中的网页截图的原网页(点击跳转)，这个网页就是font awesome的v4版本网页，因此里面提供的icon都是拥有fa前缀的，但是由于hexo的butterfly主题目前配置的是最新的font awesome v5，而fa这个前缀在v5版本及其以后版本都将会被弃用，因此在butterfly主题中使用fa前缀的icon是没法显示的。

前缀fas

fas中的s意味着solid(实心的，加粗的)的意思，图标的深灰色彩占据了图标设计的大部分。与其他样式相比，实心图标是最显眼、最醒目、最容易辨认的。

前缀fab

fab中的b意味着brand(商标)的意思，因此fas前缀的icon图标都是一些品牌图标，例如github图标，csdn图标，google图标，facebook图标等。

前缀fad

fad中的d意味着doutone(双色的)的意思，在fad为前缀的icon中，都是由两种颜色(基本上是深灰和浅灰)设计而来的。

前缀far

far中的r是regular(常规的)的意思，由于常规的icon图标都是使用矢量笔画设计的，这些图标表现出来的特点就是线条感比较简洁精细，图标呈现空心的效果，这与fas的solid恰恰是相反的。

前缀fal

fal中的l是light(轻的)的意思，这个轻是相较于far的regular和fas的solid而言的，可以如下理解: fas是线条加粗，far是线条常规粗细，fal则是线条最为纤细。

如何快速获取icon的编号以及其前缀

看了前面这么多前缀的介绍，读者可能感觉不是很好记忆。实际上，这一部分内容也是不用记忆的，纯粹理解一下就可以，这是因为font awesome V5-V6也有自己独立的网站(点击跳转)。在主页，点击导航栏的搜索图标，在随后的页面中输入自己想要的图标名，并点击对应的图标，网页将会显示一个页面如下,复制其中的fa-solid fa-address-book,黏贴到对应的位置即可。
font_awesome_v5