Font Awesome 图标分类：fab / fas / far 是什么？分别有什么作用？

在 Hexo + Butterfly 主题中，我们通常使用 Font Awesome（简称 FA）图标系统来展示各种社交媒体图标与功能性图标。Font Awesome 将图标划分为多个种类，其中最常见的是以下三种：

类别 全称 作用说明
fab Font Awesome Brands 品牌图标，用于社交平台或服务（如 GitHub、QQ、WeChat 等）
fas Font Awesome Solid 实心图标，常用于常规图标展示（如用户、信封、链接等）
far Font Awesome Regular（少用） 空心图标，主要用于特定样式（如空心信封）

使用格式示例：

1
2
3
<i class="fab fa-github"></i> <!-- GitHub 品牌图标 -->
<i class="fas fa-user"></i>   <!-- 用户图标（实心） -->
<i class="far fa-envelope"></i> <!-- 信封图标（空心） -->

常见图标及用途汇总

🏷 品牌标 fab（适合社交链接）

图标名 类名 说明
GitHub fab fa-github 常用于开发者个人主页
QQ fab fa-qq 国内常用社交工具
WeChat fab fa-weixin 微信
Facebook fab fa-facebook 海外社交平台
Twitter fab fa-twitter 海外社交平台
Instagram fab fa-instagram 图片分享平台
Reddit fab fa-reddit 海外社区平台
Linkedin fab fa-linkedin 职业社交平台

📦 实心/空心图标（fas / far）

图标用途 类名（fas/far） 示例
用户 fas fa-user 用户头像、登录注册等
链接/网址 fas fa-link 用于跳转链接图标
邮件/文件传输 fas fa-envelope 联系方式、邮箱图标
下载 fas fa-download 附件下载、资源获取按钮
博客/办公 fas fa-file-alt 博客正文、文档标识
视频/播放 fas fa-play 视频播放按钮、媒体图标

🛠 功能图标（fas / far）：用于博客交互功能

图标用途 类名（fas/far） 示例说明
用户头像 fas fa-user 登录信息、作者信息
链接按钮 fas fa-link 超链接跳转
联系方式 fas fa-envelope 邮件联系方式（实心）
联系方式（空心） far fa-envelope 邮件联系方式（空心风格）
下载功能 fas fa-download 资源/文件下载
文档 fas fa-file-alt 博文内容、正文
播放按钮 fas fa-play 媒体播放、视频播放
时间显示 fas fa-clock 显示发布时间、更新时间
评论区域 fas fa-comments 评论区图标
站内搜索 fas fa-search 搜索框放大镜图标