Font Awesome是Bootstrap 5+官方推荐的图标库，兼容性好、文档清晰、CDN稳定，支持CDN/npm/手动下载三种引入方式，需注意版本、路径及图标风格（fas/far/fab）匹配，避免因font-display、CORS或类名误用导致失效。
Bootstrap默认图标被移除后，Font Awesome是事实标准
bootstrap 5+ 已彻底移除内置图标（如 .glyphicon），官方明确推荐第三方图标库，而 font awesome 是目前兼容性最好、文档最清晰、cdn 最稳定的选项。它不依赖 javascript，纯 css + 字体文件驱动，和 bootstrap 的 class 体系天然契合——你不需要改任何 js 逻辑，只换 class 就能完成替换。
引入 Font Awesome 的三种方式及推荐选择
不是所有引入方式都适合你的项目结构，选错会导致图标不显示、重复加载或版本冲突：
- CDN 方式（开发/演示首选）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
—— 注意用6.5.0这类具体版本号，避免因 CDN 缓存导致意外升级到 v7（v7 默认启用 SVG 模式，需额外配置才能回退到 font 模式） - npm 安装（Vue/React/现代构建项目）：
npm install @fortawesome/fontawesome-free，然后在入口 JS 或 SCSS 中@import "@fortawesome/fontawesome-free/css/all.css"; - 手动下载字体文件（内网/离线环境）：必须同时放入
webfonts/目录并确保 CSS 中的url(...)路径正确，否则图标显示为方块——这是最常被忽略的路径坑
替换 Bootstrap 组件图标的关键 class 写法
Bootstrap 自身不提供图标 class，所谓“替换”其实是你在原有结构里删掉旧图标 HTML（比如 <span class="glyphicon glyphicon-chevron-right"></span>），再插入 Font Awesome 的 <i> 标签。重点不是“怎么加”，而是“加在哪”和“加什么 class”：
- 轮播控制按钮（carousel）：
<button class="carousel-control-next" type="button"><i class="fas fa-angle-right"></i></button>
—— 必须用fas（solid 风格），far（regular）在按钮中易显细弱 - 折叠组件（collapse）开关图标：
<i class="fas fa-plus"></i>和<i class="fas fa-minus"></i>需配合 JS 切换 class，不能只靠 data-bs-target - 表单输入组（input-group）右侧图标：
<span class="input-group-text"><i class="fas fa-search"></i></span>—— 不要用fa-fw（固定宽度），否则在小屏幕下会挤压输入框
常见失效原因：font-display、CORS 和图标风格混淆
图标“看不见”往往不是代码写错了，而是底层字体加载或渲染出了问题：
-
font-display: swap在某些旧版 Android WebView 中导致图标闪白或延迟渲染，生产环境建议改用block或降级为optional - 使用自建服务器但未配置 CORS 头，浏览器控制台报
Cross-Origin Request Blocked—— 此时需在 Nginx/Apache 中添加Access-Control-Allow-Origin: * - 误用
fab（Brands）类去渲染非品牌图标（如fa-home），结果空白；fab只对 Facebook、GitHub 等特定品牌有效，普通图标一律用fas或far
真正麻烦的从来不是“怎么放一个图标”，而是当它在 Safari iOS 15、IE11 兼容模式、或企业内网代理后突然消失时，你得知道该查哪一行控制台日志、哪个网络请求、哪条 CSS 规则优先级更高。
