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

图标字体实时预览 - 输入码点测试大小

12
0
0
0
U+F004 · fa-heart · Solid · 64px
快速大小： 16px 24px 32px 64px 96px 128px 200px
常用颜色：
动画效果：
图标参数
支持格式：f004 / 0xf004 / \f004 / U+F004 / 004
64px
0°
100%
0px
HTML 代码 
<i class="fa-solid fa-heart"></i>
CSS 代码（伪元素方式） 
/* 使用伪元素显示图标 */
.icon::before {
  content: '\f004';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 64px;
  color: #212529;
}
常见问题与知识点

Unicode码点（Code Point）是每个字符在Unicode标准中的唯一标识，通常以U+XXXX格式表示。图标字体（如Font Awesome）将图标设计映射到Unicode的私有使用区（Private Use Area, U+E000~U+F8FF），每个图标对应一个码点。在CSS中通过content: '\f004'引用码点，配合对应的font-family即可渲染出图标。例如Font Awesome中U+F004对应心形图标（fa-heart）。

Font Awesome 6 Free提供两种主要风格：Solid（实心）和Regular（常规/空心）。它们共用相同的Unicode码点和字体族'Font Awesome 6 Free'，但通过font-weight区分：Solid对应font-weight: 900，Regular对应font-weight: 400。并非所有图标都有Regular版本，Free版中约160+图标支持Regular风格。Brands（品牌图标）则使用独立的字体族'Font Awesome 6 Brands'。

使用CSS伪元素是最常见的方式：
.my-icon::before { content: '\f004'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
其中content的值为反斜杠+十六进制码点。注意不同风格需要设置正确的font-weight（900=Solid, 400=Regular）。Brands图标需使用font-family: 'Font Awesome 6 Brands'。此方法无需在HTML中添加额外标签，适合通过CSS批量管理图标。

常见原因：1) 图标字体未正确加载，检查CDN链接或本地字体文件路径；2) font-family设置错误，Solid/Regular应使用'Font Awesome 6 Free'，Brands应使用'Font Awesome 6 Brands'；3) font-weight不匹配，Solid需900，Regular需400；4) 输入的码点超出字体覆盖范围（Font Awesome Free版约2000+图标，Pro版更多）；5) 码点格式错误，确保使用正确的十六进制值。

图标字体：通过字体渲染，支持CSS颜色/大小/阴影等属性，单色为主，文件较小，兼容性好，适合批量图标场景。SVG图标：矢量图形，支持多色、渐变、动画，可内联或外部引用，适合复杂图标和需要精细控制的场景。Font Awesome等库同时提供两种方式。对于简单UI图标，图标字体更便捷；对于品牌Logo或复杂插画，SVG更合适。

访问 Font Awesome官网图标库，点击任意图标进入详情页，在"Unicode"栏即可查看其码点（如f004）。也可以查看Font Awesome的Cheatsheet速查表。本工具预设了60+常用图标及其码点，可直接搜索使用。此外，Bootstrap Icons、Material Icons等库也提供类似的Unicode码点查询。
✓ 已复制到剪贴板
🔧 相关工具