font-awesome(fa)

FA如何在hexo的butterfly中使用（butterfly支持V6）

font-awesome现在出到了第6版，官网如下：

需要注意的是：fa并非完全免费，只有一部分图标是免费的。想要使用免费的，注意只勾选free。

image-20221231015531278

然后点开对应的图标，在复制其中icon信息，如下图：fa-brands fa-github

image-20221231015812015

FA的一些扩展知识

FA的icon比阿里的好玩，鼠标悬浮上去时，它会自己动，很有意思。

FA有三大系列组成，分别是： Classic Family、 Sharp Family、 Brands Family，每个系列又有不同的style。详细见：

免费的FA分别有：

  • Classic Family 的 Solid ，代码前缀是fa-solid。
  • Brands Family 的 Brands，代码前缀是fa-brands。

iconfont（阿里巴巴的）

国内阿里的iconfont：iconfont-阿里巴巴矢量图标库

相关使用教程如下：

我们引用时，可以不用在本地写具体的css代码，可以直接使用远程的css链接，如下图：

image-20221231020521122

注意上图css链接前面是由两个斜杠的，别漏掉了！

使用时： iconfont <icon名>，icon名可以在iconfont官网创建的项目下看，如下图：

image-20221231020726022

当然，鼠标直接悬浮在图标上，然后选择“复制代码”，也可以实现icon的快速复制，如下图：

image-20221231030845215