How to preview a font awesome icon font and map its unicode codepoints
- Step 1Upload the Font Awesome file — Drop `fa-solid-900.woff2`, `fa-brands-400.ttf`, or any `.woff`/`.otf` you have. The tool accepts **TTF, OTF, WOFF, and WOFF2** by extension. A Font Awesome `.css` or sprite `.svg` is not a font file and will be rejected.
- Step 2Let it parse and embed — The file is parsed with opentype.js and re-embedded as a base64 data URI inside an `@font-face` rule with `font-display: block`. This happens in your browser — nothing is sent to a server.
- Step 3Scan the grid — Every glyph that carries a Unicode codepoint is drawn at 28px in a cell with a `U+XXXX` caption. Glyphs with **no** codepoint (`.notdef`, composites, ligature components) are skipped — they have nothing to type.
- Step 4Hover for the details — The browser's native tooltip shows the glyph **name** (e.g. `house`), the `U+` codepoint, and the CSS escape (`\f015`). If the font stripped its `post` table, the tooltip falls back to the hex.
- Step 5Read the codepoint you need — Find the icon visually, read its caption. `U+F015` means CSS `content: "\f015"` and HTML entity ``. Both are derived from the same codepoint shown in the grid.
- Step 6Write the CSS — Pair the codepoint with the family name from your `@font-face`: `.fa-house::before { font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f015"; }`. See the cookbook for the full rule.
What the previewer shows per glyph
Each grid cell is built from one glyph in the font's cmap. These are the only values the tool derives — there is no search box, no sort control, and no per-icon export.
| Field | Source | Example | Where it appears |
|---|---|---|---|
| Glyph render | @font-face from your file at 28px | the house icon | the cell itself |
U+XXXX hex | codepoint, upper-case, 4-digit padded | U+F015 | the caption under each glyph |
| Glyph name | post table (or null) | house | hover tooltip (title) |
| CSS escape | codepoint, lower-case | \f015 | hover tooltip (title) |
| HTML entity | &#xHEX; of the codepoint |  | computed internally; entity drives the render |
Font Awesome codepoint ranges you'll see
FA Free icons live in the Private Use Area, which is why a generic character-map app shows blanks. Ranges are illustrative of where icons sit, not a guarantee about your specific file — read the actual captions in the grid.
| Set | Typical Unicode block | Why it matters here |
|---|---|---|
| FA Free solid / regular | U+E000–U+F8FF (Private Use Area) | Renders fine here because the actual font is embedded |
| FA Brands | U+E000–U+F8FF (PUA) | Same PUA block; brand glyphs appear alongside icons |
| Latin letters in the file | U+0041–U+007A etc. | If present and encoded, they show too — FA icon files usually omit them |
.notdef / unencoded | no codepoint | Skipped — not shown, because there's no codepoint to type |
Cookbook
Turning a grid cell into working CSS. Codepoints below are illustrative Font Awesome values — always read the real caption from your uploaded file.
From a grid cell to a ::before rule
ExampleYou found the house icon; its caption reads U+F015. Pair the codepoint with the FA family name and weight (solid is weight 900).
/* Caption in the grid: U+F015 */
.fa-house::before {
font-family: "Font Awesome 6 Free";
font-weight: 900; /* solid */
content: "\f015"; /* the U+ hex, lower-case, no padding */
}Same codepoint as an HTML entity
ExampleIf you want to drop the glyph inline in HTML rather than via CSS content, use the hex entity form of the same codepoint.
<!-- U+F015 as an HTML entity -->
<i class="fa-glyph"></i>
<style>
.fa-glyph { font-family: "Font Awesome 6 Free"; font-weight: 900; }
</style>Confirm a pinned old version still has an icon
ExampleMarketing pinned FA 5.15 three years ago. Before you write content: "\f7d9" (fa-gears), preview that exact .woff2 to confirm the codepoint is encoded in the file you actually ship.
1. Upload fa-solid-900.woff2 from the pinned 5.15 build 2. Look for the gears glyph in the grid 3. Read its caption — e.g. U+F085 in FA5 vs a different point in FA6 4. Use the codepoint THIS file reports, not the current cheatsheet's
Spot a missing icon before it ships as a box
ExampleIf the icon you expected has no cell in the grid, the codepoint isn't encoded in this file — writing content for it will paint a tofu box. Subset or re-download before shipping.
Expected fa-house (U+F015) but no U+F015 cell appears -> the glyph is not in this file's cmap -> content: "\f015" will render nothing / .notdef -> grab the full set or re-add it with a subsetter
Pick the right weight family
ExampleFA Free splits solid and regular into separate files with the same codepoints but different font-weight. Preview each file so you map the icon to the file (and weight) that actually contains it.
Preview fa-solid-900.woff2 -> solid set (font-weight: 900) Preview fa-regular-400.woff2 -> regular set (font-weight: 400) Same U+ codepoint can render differently per file — match your @font-face src + weight to the file you previewed
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Upload a Font Awesome CSS or sprite SVG instead of the font
Rejected — not a supported fontThe tool accepts only .ttf, .otf, .woff, and .woff2 (checked by extension). A fontawesome.css or icons.svg sprite is rejected before parsing with a 'not a supported font' message. Upload the actual fa-solid-900.woff2 from the webfonts/ folder.
Glyphs with no codepoint never appear
Skipped by designThe handler skips any glyph where unicode == null. In Font Awesome that includes .notdef, composite/ligature components, and any glyph reachable only by OpenType feature lookups. There's nothing to type for them, so they're omitted — the grid is a codepoint map, not a glyph dump.
Font has more than 1500 encoded glyphs
Capped at 1500 shownFor browser performance the grid renders only the first 1500 encoded glyphs and prints 'Showing 1500 of N encoded glyphs'. FA Free is well under this, but a merged 'all FA + brands' file or a huge custom set can exceed it. The cap is on display, not on parsing.
You expected click-to-copy but nothing copied
No copy handlerThe grid is static HTML and CSS — there is no JavaScript in the output. The on-page note mentions copying, but the practical path is to read the U+XXXX caption (or hover for the CSS escape) and type it. The cell shows a copy cursor but does not run a copy script.
Hover shows the codepoint instead of a name
Expected — no post tableGlyph names come from the font's post table. Many shipped icon .woff2 files strip post to save bytes, so the tooltip falls back to U+XXXX. The codepoint is what you write into CSS anyway, so this doesn't block you.
Upload a .ttc TrueType Collection
Unsupported font formatMulti-face collection files (magic ttcf) are not supported — fileToSfntBuffer only handles ttf/otf/woff/woff2 and throws 'Unsupported font format: ttc'. FA doesn't ship .ttc, but a system-extracted bundle might. Extract a single face first.
An icon renders as a tofu box in the grid
Codepoint present, outline missingIf a cell shows □ rather than the icon, the codepoint is encoded in cmap but the glyph outline is empty or .notdef in this file — a hallmark of an over-aggressive subset. The previewer renders the truth: the icon is not really there. Re-add it with a font subsetter.
File over your tier's size limit
Rejected — exceeds tier limitThe previewer is free, but the per-job file-size gate still applies: 5 MB on Free, 50 MB on Pro, 1 GB on Developer. A normal FA .woff2 is tens of KB, so this only bites on bloated all-in-one TTFs. Use a .woff2 instead of the uncompressed .ttf.
Frequently asked questions
Does this work with the exact Font Awesome file I downloaded?
Yes — that's the point. It parses and renders the file you upload, so the grid reflects your version (even an old pinned one), not whatever the live cheatsheet currently ships.
Why are some Font Awesome icons missing from the grid?
Only glyphs that carry a Unicode codepoint are shown. .notdef, composites, and glyphs reachable solely through OpenType lookups are skipped because there's no codepoint to type. If an icon you expected is missing, it isn't encoded in this file.
How do I turn a cell into CSS?
Read the U+XXXX caption, drop the U+ and any leading zeros for the escape, and write content: "\f015". Pair it with the FA family name and the right font-weight (900 for solid, 400 for regular).
Can I click an icon to copy its codepoint?
No. The output is static HTML/CSS with no JavaScript. Read the caption or hover for the CSS escape and type it. For a generated CSS class list from icon names, use the PUA point assigner instead.
Why does hover sometimes show U+XXXX instead of an icon name?
Names come from the font's post table, which many icon .woff2 files strip to save space. When it's gone, the tooltip falls back to the codepoint — which is what you need for CSS anyway.
Does it read .woff2 directly?
Yes. WOFF2 is Brotli-decompressed in the browser, WOFF is zlib-decompressed, and TTF/OTF are read as-is. All four formats render the same way.
Is my licensed Pro icon font uploaded anywhere?
No. Parsing, decompression, and rendering all happen client-side in your browser. The font never leaves your machine.
Can it export a sprite sheet or PNGs?
No. The output is a single HTML grid. For per-glyph SVG outlines and thumbnails, use the glyph inspector.
Why is an icon showing as a tofu box?
The codepoint is in the cmap but the outline is empty — usually an over-subset file. The previewer is showing the truth. Re-add the glyph with the font subsetter.
How many icons does this file actually have, and is 1500 a hard limit?
The header reports 'Showing N of M encoded glyphs' — M is the encoded total; display is capped at the first 1500 (FA Free is well under it). For a fuller breakdown of glyph counts and coverage, use the glyph-count analyzer or the character coverage map.
It rejected my upload — why?
Either the extension isn't .ttf/.otf/.woff/.woff2 (a CSS or sprite SVG is not a font), or the file is over your tier's size limit (5 MB Free / 50 MB Pro / 1 GB Developer), or it's a .ttc collection, which isn't supported.
What if I have icon names but no font yet?
This tool reads codepoints out of an existing font. To go the other way — assign Private Use Area codepoints and generate CSS from a list of icon names — that's the PUA point assigner; this previewer confirms the result.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.