无需登录 数据私有 本地保存

图标库速查表 - Font Awesome 6实时搜索

前端设计 开发工具 Font Awesome 图标库 速查
50
0
0
0

Font Awesome 6 图标速查表

快速搜索、浏览和复制 Font Awesome 6 图标代码 · 免费开箱即用

快捷键 Ctrl + K 聚焦搜索框
全部图标 Solid 实心 Regular 常规 Brands 品牌 常用推荐
复制格式：
共 0 个图标

没有找到匹配的图标

试试其他关键词或清除筛选条件

常见问题与知识点

Font Awesome 6 与 Font Awesome 5 有什么区别？
Font Awesome 6 相比 5 版本新增了超过 600+ 个全新图标，并重新设计了部分现有图标。最大的变化是引入了 Sharp（锐利） 风格（需Pro授权），同时优化了图标的线条粗细一致性。FA6 还改进了可访问性支持，并提供了更完善的 React/Vue 组件库。如果你是新项目，强烈建议直接使用 FA6。
如何在项目中快速引入 Font Awesome 6？
最简单的方式是通过 CDN 引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
这包含了 Solid、Regular 和 Brands 三种免费风格。你也可以使用 npm 安装：
npm install @fortawesome/fontawesome-free
然后在 JS 中 import 或在 SCSS 中引入。
免费版（Free）和 Pro 版有什么区别？
免费版包含约 2,000+ 个图标，涵盖 Solid（实心）、Regular（常规）和 Brands（品牌）三种风格。Pro 版则额外提供 Light（细线）、Thin（极细）、Duotone（双色）和 Sharp（锐利） 等风格，图标总数超过 26,000+。对于大多数项目，免费版已经足够使用。本工具展示的均为免费版图标。
图标颜色和大小如何自定义？
Font Awesome 图标本质上是文字图标，因此可以直接使用 CSS 的 color 属性改变颜色，使用 font-size 改变大小。FA 还内置了尺寸工具类：fa-xs、fa-sm、fa-lg、fa-2x 到 fa-10x。你也可以使用 fa-fw 类来固定宽度，使图标在列表中整齐对齐。
如何在 React / Vue / Angular 中使用 Font Awesome？
对于 React，推荐使用官方组件库：npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons，然后按需引入图标。Vue 用户可使用 @fortawesome/vue-fontawesome。Angular 用户使用 @fortawesome/angular-fontawesome。这种按需引入的方式可以显著减小打包体积，比全量引入 CSS 更高效。
如何在 CSS 中使用 Font Awesome 图标作为伪元素内容？
你可以使用图标的 Unicode 码点 在 CSS 的 ::before 或 ::after 伪元素中显示图标。例如：
.selector::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f007"; }
其中 \f007 是 fa-user 图标的 Unicode 码点。注意 Solid 风格使用 font-weight: 900，Regular 使用 font-weight: 400，Brands 使用 font-family: "Font Awesome 6 Brands"。
图标无法正常显示怎么办？
常见原因包括：① CDN 链接失效或版本不匹配；② font-family 未正确设置；③ 使用了 Pro 版专属图标但只有免费版库；④ 类名拼写错误（注意 FA6 使用 fa-solid 而非 fas，虽然简写仍可用）；⑤ 与其他 CSS 框架的类名冲突。建议使用浏览器开发者工具检查元素的 computed styles。
Font Awesome 6 支持哪些网络字体格式？
FA6 支持 WOFF2、WOFF、TTF、EOT 和 SVG 格式。WOFF2 是现代浏览器的最佳选择，文件体积最小，加载最快。CDN 版本会自动根据浏览器能力选择最优格式。如果你自托管，建议优先提供 WOFF2 格式文件。
🔧 相关工具