Font Awesome的6个CSS实战技巧：改色、缩放、旋转、堆叠图标布局一次学会-平芜编程栈

Font Awesome的6个CSS实战技巧：改色、缩放、旋转、堆叠图标布局一次学会

【免费下载链接】Font-AwesomeThe iconic SVG, font, and CSS toolkit项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome

Font Awesome 是最流行的免费图标工具包之一，提供 SVG、字体和 CSS 三种形态的图标。本文面向新手，用 6 个最简单的 CSS 技巧，带你快速学会Font Awesome 图标改色、图标缩放、旋转翻转、图标堆叠布局、动画和边框，全部一行类名即可实现，无需任何 JavaScript。

快速开始：引入 Font Awesome

只需引入一份 CSS 与字体文件，图标就能用"类名"直接调用：

<link rel="stylesheet" href="css/all.css"> <i class="fa-solid fa-heart"></i>

编译好的样式表：css/all.css（压缩版 css/all.min.css）
按图标风格拆分：css/solid.css（实心）、css/regular.css、css/brands.css
字体文件位于 webfonts/，SVG 矢量图标位于 svgs/

下面 6 个技巧全部只靠 CSS 类名完成 👇

技巧一：一行代码改色 Font Awesome 图标

字体图标天生继承文字颜色，所以color属性对它直接生效：

<i class="fa-solid fa-heart" style="color: #e50914;"></i> <i class="fa-solid fa-bell" style="color: #2563eb;"></i>

更推荐在外部 CSS 或主题变量里统一控制，方便全局换肤：

.logo-icon { color: var(--brand-color); }

💡 小技巧：给<i>的父元素设置颜色，内部所有图标会一起变色，非常适合做状态色（成功绿 / 警告橙 / 错误红）。

颜色能力的源码在 scss/_core.scss 中定义。

技巧二：Font Awesome 图标缩放，从超小到 10 倍

官方内置了从fa-xs到fa-10x的完整尺寸梯度，直接叠加类名即可：

类名	视觉效果
`fa-2xs`/`fa-xs`	比正文略小，适合行内小标记
`fa-sm`	比正文稍小
`fa-lg`	比正文稍大
`fa-2x`	2 倍，最常用
`fa-5x`~`fa-10x`	展示级大图标

<i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-5x"></i>

尺寸规则定义在 scss/_sizing.scss。因为单位是em，图标会随所在文字的font-size等比缩放——放进大标题里自动变大，无需额外处理。

技巧三：旋转与翻转 Font Awesome 图标

官方提供 4 个固定角度旋转 + 3 种翻转，一行类名搞定：

<!-- 固定角度：90° / 180° / 270° --> <i class="fa-solid fa-arrow-right fa-rotate-90"></i> <i class="fa-solid fa-xmark fa-rotate-45"></i> <!-- 镜像翻转 --> <i class="fa-solid fa-arrow-left fa-flip-horizontal"></i>

需要任意角度时，用fa-rotate-by类 + 一个 CSS 变量（源码见 scss/_rotated-flipped.scss）：

.tilted { --fa-rotate-angle: 15deg; }

<i class="fa-solid fa-arrow-right fa-rotate-by tilted"></i>

⚠️ 注意：fa-rotate-by需要配合旋转类一起使用才能看到自定义角度生效，这是新手最容易踩的坑。

技巧四：Font Awesome 图标堆叠布局（最实用的排版技巧）

把两个图标"叠"在一起，是做"徽章式"图标的经典方法：外层用fa-stack定位容器，内层用fa-stack-2x（大，底层）和fa-stack-1x（小，顶层）分层：

<i class="fa-circle fa-stack-2x" style="color: #e50914;"></i> <i class="fa-check fa-stack-1x fa-inverse"></i>

效果就是一个白勾落在红色实心圆上。fa-inverse把顶层图标反色为白色（实现见 scss/_stacked.scss）。

常见堆叠套路：

组合	场景
圆`fa-circle`+ 勾`fa-check`	成功状态
圆 +`fa-xmark`	错误/删除标记
信封`fa-envelope`+`fa-bell`	未读提醒角标

技巧五：让图标动起来——内置动画类

Font Awesome 自带 4 种 CSS 动画，零 JavaScript：

<i class="fa-solid fa-circle-notch fa-spin"></i> <!-- 加载旋转 --> <i class="fa-solid fa-heart fa-beat"></i> <!-- 心跳 --> <i class="fa-solid fa-bell fa-shake"></i> <!-- 震动提醒 --> <i class="fa-solid fa-circle fa-pulse"></i> <!-- 闪烁 -->

动画定义在 scss/_animated.scss，且全部参数可被 CSS 变量覆盖，例如让转圈更快、反向：

.fast-spinner { --fa-animation-duration: 0.8s; } .reverse-spinner { --fa-animation-direction: reverse; }

技巧六：给图标加边框，与按钮无缝融合

fa-border会给图标补上一圈边框，让它在方框形按钮/标签中对齐更美观：

<i class="fa-solid fa-github fa-border fa-2x"></i>

边框的粗细、颜色、圆角都可以用 CSS 变量微调（定义见 scss/_bordered.scss）：

.my-border { --fa-border-color: #ccc; --fa-border-width: 2px; }

6 个技巧速查表

#	需求	类名	源码
1	改色	`color`/ CSS 变量	scss/_core.scss
2	缩放	`fa-xs`~`fa-10x`	scss/_sizing.scss
3	旋转翻转	`fa-rotate-90/180/270`、`fa-flip-horizontal`、`fa-rotate-by`	scss/_rotated-flipped.scss
4	堆叠布局	`fa-stack`+`fa-stack-2x`+`fa-stack-1x`	scss/_stacked.scss
5	动画	`fa-spin`、`fa-beat`、`fa-shake`、`fa-pulse`	scss/_animated.scss
6	边框	`fa-border`	scss/_bordered.scss

所有类名最终都编译进 css/all.min.css，图标命名规则可参考 metadata/icons.json，完整版本变更历史见 CHANGELOG.md。

写在最后

以上 6 个技巧覆盖 90% 的日常需求：改色靠color，缩放靠fa-2x系列，旋转靠fa-rotate-*，堆叠靠fa-stack，动效靠fa-spin等动画类，修饰靠fa-border。全部只用 CSS，不用写一行 JS。建议把 scss/ 目录当作"官方字典"收藏——每个文件对应一类能力，遇到想不到的效果时，先来这里翻一翻，基本都能找到答案 ✨