学习 FontAwesome 进阶使用技巧、动画效果和最佳实践
按需引入减少加载体积：
品牌图标使用 fa-brands 前缀：
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-vuejs"></i>
<i class="fa-brands fa-react"></i>
<i class="fa-brands fa-weixin"></i>邮件客户端对 Web Font 支持有限，建议：
确保图标对辅助技术友好：
aria-hidden="true"role="img" 和 aria-label<title> 描述使用 CSS color 属性更改图标颜色：
<i class="fa-solid fa-heart" style="color:red"></i>
<i class="fa-solid fa-star" style="color:gold"></i>通过 CSS text-shadow 为图标添加阴影：
.fa-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}FontAwesome 与 Bootstrap 完美兼容，推荐 CDN 引入：
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">使用 SVG 框架的 fa-layers 将多个图标叠加组合：
<span class="fa-layers fa-fw">
<i class="fa-solid fa-circle" style="color:tomato"></i>
<i class="fa-solid fa-xmark fa-inverse" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fa-solid fa-circle" style="color:green"></i>
<i class="fa-solid fa-check fa-inverse" data-fa-transform="shrink-6"></i>
</span>在 CSS 伪元素中使用图标，需要引入 SVG JS 并使用 content 属性：
.my-icon::before {
content: '\\f015';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}使用 fa-xs 到 fa-10x 类名控制图标大小：
<i class="fa-solid fa-camera fa-xs"></i> 极小
<i class="fa-solid fa-camera fa-sm"></i> 小
<i class="fa-solid fa-camera fa-lg"></i> 大
<i class="fa-solid fa-camera fa-2x"></i> 2倍
<i class="fa-solid fa-camera fa-3x"></i> 3倍
<i class="fa-solid fa-camera fa-5x"></i> 5倍
<i class="fa-solid fa-camera fa-10x"></i> 10倍使用 fa-rotate-90/180/270 类名旋转图标：
<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>
<i class="fa-solid fa-arrow-right fa-rotate-270"></i>使用 fa-flip-horizontal/vertical/both 类名翻转图标：
<i class="fa-solid fa-arrows-left-right fa-flip-horizontal"></i>
<i class="fa-solid fa-arrows-left-right fa-flip-vertical"></i>
<i class="fa-solid fa-arrows-left-right fa-flip-both"></i>FontAwesome 提供 6 种内置动画类：