Font Awesome需单独引入，推荐CDN加载v6版并用fa-solid fa-user类名；SVG图标更可控，支持内联、样式化和动态控制，现代项目优先选用。
如何在 CSS 框架中加载 Font Awesome 字体图标
Font Awesome 是最常用的字体图标库之一，主流 CSS 框架（如 Bootstrap、Tailwind）本身不内置图标，需单独引入。关键不是“框架是否支持”，而是你项目中能否正确加载其字体文件与 CSS。
常见错误是只引入 fontawesome.css 却没配好字体路径，导致图标显示为方块或问号；或使用了新版 v6 的 @fortawesome/free-solid-svg-icons 但误按 v5 方式写类名（比如仍用 fa fa-user）。
- 推荐用 CDN 引入 v6 免费版：在
中加 - v6 类名格式为
fa-solid fa-user（不是fa fa-user），fa-regular和fa-brands同理 - 若用 npm 安装，确保构建工具（如 Vite/Webpack）能解析
@font-face中的url(...)路径，否则需手动复制webfonts/目录到public/
为什么直接 import SVG 文件比字体图标更可控
字体图标本质是字符映射，受限于 Unicode 范围、无法精确控制颜色/尺寸/描边，且 SSR 或 CSP 环境下易出问题。SVG 文件可内联、可复用、可样式化，现代前端项目更倾向这种方式。
典型场景：React/Vue 项目中需要动态切换图标颜色，或图标需响应鼠标悬停变化——字体图标只能靠 color 改主色，而 SVG 可直接用 fill、stroke、transform 控制每个路径。
立即学习“前端免费学习笔记（深入）”；
