深入了解 FontAwesome 的各种使用技巧
使用 fa-rotate-90、fa-rotate-180、fa-rotate-270 旋转图标。也可结合 fa-flip-horizontal 或 fa-flip-vertical 翻转图标方向。
使用 fa-spin（连续旋转）、fa-pulse（8步旋转）、fa-beat（跳动）、fa-fade（淡入淡出）、fa-beat-fade（跳动淡出）、fa-flip（翻转）、fa-shake（抖动）为图标添加动态效果。
使用 fa-stack 容器将多个图标上下堆叠，设置 fa-stack-1x 和 fa-stack-2x 控制层级大小。适合制作复合图标，如带角标的应用图标。
使用 fa-fw 将图标设为固定宽度（1.25em），使不同宽度的图标在列表中整齐排列，适合导航菜单和列表场景。
fa-xs（0.75em）、fa-sm（0.875em）、fa-lg（1.33em）、fa-2x~fa-10x 逐级放大。也可用 CSS font-size 精确控制。
直接使用 CSS color 属性设置图标颜色：<i class="fa-solid fa-heart" style="color:red"></i>。支持任意颜色值。
使用 fa-border 为图标添加边框，fa-pull-left / fa-pull-right 让图标文字环绕，fa-inverse 反转图标颜色以适应深色背景。
在导航链接前添加图标可以提升视觉辨识度。使用 fa-fw 固定宽度类让图标对齐。
<nav>
<a href="#"><i class="fa-solid fa-house fa-fw"></i> 首页</a>
<a href="#"><i class="fa-solid fa-user fa-fw"></i> 个人中心</a>
<a href="#"><i class="fa-solid fa-gear fa-fw"></i> 设置</a>
</nav>品牌图标搭配颜色，快速制作社交分享按钮。
<a href="#" class="btn btn-dark">
<i class="fa-brands fa-github"></i> GitHub
</a>
<a href="#" class="btn btn-primary">
<i class="fa-brands fa-weixin"></i> 微信
</a>结合 JavaScript 实现星级评分交互组件。
<div class="rating">
<i class="fa-solid fa-star" style="color:gold"></i>
<i class="fa-solid fa-star" style="color:gold"></i>
<i class="fa-solid fa-star" style="color:gold"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>使用 fa-spin 或 fa-pulse 制作加载动画。
<button disabled>
<i class="fa-solid fa-spinner fa-spin"></i> 加载中...
</button>
<div class="text-center">
<i class="fa-solid fa-circle-notch fa-spin fa-3x"></i>
<p>正在加载数据...</p>
</div>