Font Awesome 图标查询

功能

• 两千多个图标（solid / regular / brands 三种样式）
• 按名字、标签、搜索词三层匹配，并按命中层次排序 —— 名字命中优先
• 多词是「都要命中」：`arrow up` 只出同时含这两个词的图标
• 连字符自动断词：`arrow right` 能匹配到 `arrow-right`
• 按样式筛选（品牌图标只有 brands 一种）
• 点图标展开四种用法：类名、内联 SVG、Unicode、HTML 实体，各自可一键复制
• 图标走官方 sprite（`<use>` 引用），一个图标一个 DOM 节点，一页几十个也不卡
• 索引与图标都在本站，断网可用；页面下方按许可要求署名

使用方法

1. 在搜索框里输名字或用途 —— 中文用途也行不通时，试英文关键词
2. 需要的话按样式筛选（品牌图标在 brands 里）
3. 点一个图标，看它的四种用法
4. 复制对应那一种，粘到自己的项目里

常见问题

图标可以商用吗？

可以。Font Awesome Free 的图标采用 CC BY 4.0 许可：允许商用、允许修改、允许再分发，唯一的要求是署名（在你项目的「开源许可」页面里列上 Font Awesome 与 Fonticons, Inc. 即可）。字体部分是 SIL OFL 1.1、代码是 MIT —— 三者都比「免费版不能用」这种说法宽松得多，但都要保留署名。

为什么搜「上传」搜不到？

因为图标名、标签与搜索词都是英文的（这是 Font Awesome 的数据，不含中文检索词）。所以这里只能按英文搜：`上传` 对应的关键词是 `upload`（结果是 `arrow-up-from-bracket`）、`分享` 是 `share`、`删除` 是 `trash` 或 `delete`。想按中文找图标，可以先想「这个动作的英文是什么」—— 这也是为什么搜索结果里会标出「它是靠哪个词命中的」。

类名和内联 SVG 该用哪个？

看你的项目有没有引 Font Awesome。已经引了它的 CSS（几百 KB，或者用 JS 版按需加载）就用类名 `<i class="fa-solid fa-house">` —— 改样式（尺寸、颜色）方便，图标也能随 CSS 一起缓存。没引就别为了几个图标去引，用内联 SVG：`<svg><use href="/fa-sprites/solid.svg#house"></use></svg>`（或者把路径直接内联进 HTML）。这一页给的都是能直接用的写法，其中内联 SVG 那条指向本站的 sprite —— 换到你自己的项目时记得把这份 sprite 也拷过去。

Unicode 那两种写法什么时候用？

用在图标字体的场合：`\f015` 是 CSS 写法（`content: "\f015"` 配伪元素，或用 `::before` 做图标按钮），`&#xf015;` 是 HTML 实体写法（写在 HTML 里）。这两种都不需要类名，代价是可读性差（看代码的人不知道 `\f015` 是什么），所以只在确实需要时用 —— 比如用伪元素做纯装饰图标，那时 HTML 里不该多一个空元素。