图标库速查
FontAwesome / Material / Lucide / Heroicons · 点击复制
第一节
关于本工具
About写页面时，图标名和实际样式对不上最耗时间。这个工具把 FontAwesome、Material 和 Lucide 三套图标库的类名、Unicode 和预览图并排展示，输入关键词就能筛出对应图标，点类名直接复制。所有数据预置在浏览器本地，不依赖网络请求，页面打开后断网也能查。
使用场景
前端验收图标缺失
设计稿里用了 FontAwesome 的「user-edit」图标，但开发阶段发现该图标在 Free 版中已废弃。验收人员需要在 10 分钟内找到一款语义相近、且在当前图标库（Material 或 Lucide）中存在的免费替代品。本工具支持跨库检索，输入「编辑用户」或「edit-profile」，即可同时比对三个库的匹配结果，避免逐个翻文档的耗时。
技术文档统一符号
团队写 API 文档时，内部约定用 Lucide 的「server」表示后端服务、Material 的「cloud」表示云部署。新同事接手后，不确定某个操作该用哪个库的图标。本工具支持按关键词搜索并显示图标归属库，文档维护者可以快速确认「lock」在 Material 里是「lock_open」还是「lock_outline」，保证全文符号体系一致。
原型图快速替换占位
产品经理用 Axure 画低保真原型，临时需要 5 个代表「设置」「通知」「帮助」「搜索」「用户」的图标。手边只有 FontAwesome 的 CDN 链接，但不确定图标名称。本工具提供拼音与英文名混合搜索，输入「shezhi」或「settings」都能找到对应图标名，直接复制 class 名即可嵌入原型，无需切换页面查文档。
多端图标命名对齐
移动端用 Material 的「menu」，Web 端用 FontAwesome 的「bars」，但后端日志里统一记作「sidebar_toggle」。开发联调时发现两端图标名称不一致，需要手动映射。本工具支持输入别名（如「hamburger」「three_lines」）查询各库的正式命名，帮助前后端在 15 分钟内完成名称对照表，减少沟通成本。
设计稿图标合规检查
UI 设计师交付的界面里用了 FontAwesome Pro 版的「star-half-alt」，但项目授权仅限 Free 版。法务要求上线前替换所有 Pro 图标。本工具支持输入图标名后自动标注其所属库的版本（Free/Pro），设计师可一键筛选出所有 Pro 图标，并查看 Free 版中语义最接近的替代方案，避免侵权风险。
第二节
使用指南
Getting Started使用步骤
- 1在搜索框输入图标关键词（如“home”），下方列表实时过滤出匹配的 FontAwesome、Material、Lucide 图标
- 2点击任一图标，右侧预览区显示该图标的大尺寸渲染及对应 CSS 类名（如 fa-home）
- 3点击类名旁的复制按钮，类名自动写入剪贴板，按钮短暂显示“已复制”反馈
- 4切换顶部标签（FontAwesome / Material / Lucide）可单独查看某一图标集的匹配结果
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| fa-home | FontAwesome 6 Free: U+f015, Solid/Regular/Brands 均可用 | 常规：最常用的图标之一，验证多风格（Solid/Regular）的识别能力 |
| material-symbols:home-outline | Material Symbols: U+e88a, Outlined 风格 | 常规：Material 图标支持变体后缀（-outline/-sharp/-rounded），验证后缀解析 |
| lucide:home | Lucide: U+1F3E0, 仅一种风格 | 常规：Lucide 图标无变体，验证单风格库的简洁输出 |
| fa-500px | FontAwesome 6 Brands: U+f26e, 仅 Brands 可用 | 边界：品牌图标（Brands）仅限一种风格，验证风格过滤逻辑 |
| material-icons:10k | Material Icons: U+e951, Filled 风格 | 边界：数字开头的图标名，验证命名规则的兼容性（非字母开头） |
| fa-不存在 | 未找到匹配图标。请检查名称拼写或库前缀（fa-/material-/lucide-） | 易错：输入错误图标名时，工具应明确提示错误原因而非静默失败 |
| material-symbols:home | Material Symbols: U+e88a, 默认 Filled 风格（未指定后缀时） | 易错：Material 图标省略后缀时默认风格可能因版本而异，需明确输出默认值 |
常见错误对照
1.搜索时混用 FontAwesome 与 Material 的类名前缀
✗ 错误
fa fa-home✓ 修复
fas fa-homeFontAwesome 5+ 废弃了 fa 前缀，改用 fas/far/fal/fab；Material 用 material-icons 类名。混用前缀会导致图标不显示。
2.Lucide 图标名大小写错误
✗ 错误
Home✓ 修复
homeLucide 图标名全小写，且用连字符连接多词（如 'arrow-right'）。大写或驼峰会匹配失败。
3.FontAwesome 免费版与 Pro 版图标混查
✗ 错误
fa-robot✓ 修复
fa-robotfa-robot 是 Pro 图标，免费版不包含。工具会返回该图标名，但实际页面加载免费版 CSS 时不会渲染。
4.Material Icons 的图标名拼写不一致
✗ 错误
add_shopping_cart✓ 修复
add_shopping_cartMaterial 图标名有下划线、连字符、驼峰三种变体（如 'add_shopping_cart' vs 'add-shopping-cart'）。工具索引的是官方名称，需核对官方文档。
5.误将 FontAwesome 的 'fa-' 前缀当作图标名的一部分
✗ 错误
fa-home✓ 修复
home工具搜索框只接受图标名（如 'home'），不含前缀。输入 'fa-home' 会被当作字面字符串，找不到匹配。
6.Lucide 图标名中使用了已弃用的别名
✗ 错误
alert✓ 修复
triangle-alertLucide v0.300+ 将 'alert' 重命名为 'triangle-alert'。旧名仍可搜索但会标记为弃用，建议用新名。
7.同时查询多个图标库时未区分结果来源
✗ 错误
搜索 'home' 后直接复制第一个结果✓ 修复
查看结果旁的图标库标签（FA/MD/LU）同一图标名在不同库中样式不同（如 FontAwesome 的 home 是实心，Lucide 是线性）。不区分来源会导致页面样式冲突。
第三节
工作原理
How It Works核心公式
图标匹配度 = Σ(类别权重 × 命中系数) / 总类别数
变量说明
类别权重各图标库(FontAwesome等)的预设权重命中系数搜索词在图标名称/标签中匹配为1，否则0总类别数参与匹配的图标库数量(如3个)
示例
搜索词"home"，FontAwesome命中(权重0.4)、Material命中(权重0.3)、Lucide未命中(权重0.3)：匹配度 = (0.4×1 + 0.3×1 + 0.3×0) / 3 = 0.7/3 ≈ 0.233，结果按降序排列，优先展示FontAwesome和Material的home图标。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问搜图标时只显示 FontAwesome 的结果，怎么切到 Material 或者 Lucide？＋
答
本工具在搜索框下方或侧边栏提供了图标库切换标签（FontAwesome / Material / Lucide），点击即可切换搜索范围。如果没有看到切换选项，可能是页面布局遮挡，尝试滚动或缩小浏览器页面比例。切换后搜索词会自动保留，不需要重新输入。
问为什么我搜“home”出来的图标和官网上不一样？＋
答
本工具收录的是各图标库的免费版或开源子集（FontAwesome 的 Free 版、Material Design Icons 的社区版、Lucide 的完整开源集），与官网付费版或 Pro 版可能不完全一致。另外搜索结果是模糊匹配，部分图标名称在库内叫“house”或“home-alt”，可以尝试换同义词搜索。
问怎么复制图标到剪贴板？我点了没反应。＋
答
点击图标卡片或右侧的“复制”按钮即可将图标的 Unicode 字符或 SVG 代码复制到剪贴板。如果点了没反应，检查浏览器是否阻止了剪贴板权限（Chrome 设置 > 隐私与安全 > 剪贴板）。也可以手动选中图标下方的 HTML 或 CSS 代码片段，按 Ctrl+C 复制。
问搜索结果里有的图标是灰色方块，点不了怎么回事？＋
答
灰色方块表示该图标在当前选中的图标库中不存在或已被废弃。本工具只展示已收录的图标，灰色块是占位提示，并非功能故障。可以尝试切换到其他图标库（如从 FontAwesome 切到 Material）或搜索更通用的关键词。
问这个工具能批量查几十个图标吗？还是只能一个一个搜？＋
答
目前仅支持单个关键词搜索，不支持批量输入多个图标名称。如果需要批量比对，建议先用 CSV 或 Excel 整理好图标名，逐个粘贴搜索。如果确实有批量需求，可以考虑使用各图标库官方的 API（如 FontAwesome API）或本地脚本处理。
问搜出来的图标大小怎么调？看起来太小了看不清。＋
答
本工具结果区默认显示 48px 大小的图标，通常足够预览。如果觉得太小，可以按住 Ctrl 键滚动鼠标滚轮放大页面整体比例，或使用浏览器缩放功能（Chrome 菜单 > 缩放）。图标卡片不支持单独放大，但点击卡片后弹出的详情弹窗会显示更大尺寸的预览。
问为什么我搜“user”出来很多，但搜“users”就少了？＋
答
本工具采用精确关键词匹配，不会自动进行复数或词形变化。例如 FontAwesome 里图标名是“user”而非“users”，所以搜“users”可能只匹配到少量别名。建议搜索单数形式或核心词根，比如搜“user”比搜“users”覆盖面更广。
问这个工具离线能用吗？没网的时候能不能查？＋
答
本工具是纯前端实现（FE），图标数据在页面加载时一次性从服务器获取并缓存到浏览器本地。如果首次加载成功（即页面正常显示过），在断开网络后刷新页面，部分浏览器可能会从缓存中恢复数据，但无法保证完全离线工作。建议有网时提前打开页面，避免临时断网无法使用。
问搜出来的图标代码（比如 fa-user）能直接用到我的项目里吗？＋
答
可以，但需要确保项目中已正确引入对应图标库的 CSS 或 JS 文件。例如 FontAwesome 需要引入 font-awesome 包并绑定 Font Awesome 的 CSS 类名（如 <i class="fas fa-user"></i>）。本工具展示的 HTML 代码片段可直接复制使用，但图标本身是引用外部库资源，项目需联网或自托管字体文件。
问为什么 Material 图标搜出来没有 FontAwesome 多？＋
答
这是正常情况。各图标库的收录数量不同：FontAwesome Free 版约 2000+ 个图标，Material Design Icons 社区版约 5000+ 个但部分为付费 Pro 版，Lucide 开源版约 1000+ 个。本工具只展示各库免费/开源子集，且 Material 的搜索匹配规则更严格（要求完全匹配关键词），所以感觉结果少。可以尝试使用更通用的英文关键词。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。