Specify a range to reset character codes or ligatures. You can find a glyph's index by hovering over it.

@font-face { font-family: 'fonticon-font-tab'; src: url({{localFont}}) format('truetype'); font-weight: normal; font-style: normal; } .ff-fonticon-font-tab { font-family: 'fonticon-font-tab', sans-serif; } .glyphName { padding-bottom: {{10 / 128 + max(fontPref.metrics.baseline / 100, 0)}}em; }

Development Link

style.css | variables.{{fontPref.cssVarsFormat}} | style.{{fontPref.cssVarsFormat}}

Do not use this link in production

This link expires in 24 hours. To get permanent unchanging links, Go Premium.

Production Links

Last uploaded on

Updating files on CloudFront takes 10 to 15 minutes.

to upload fonts for hosting or sharing. Using this feature, you can reference your fonts in HTML and easily change your icon selection on the fly, without having to update your CSS.

Multicolor glyphs take more than one character code and cannot have ligatures.

Nothing to show! Please select some icons first.

#glyphSet{{$index}} .fs-prevSize { font-size: {{glyphs[0].properties.prevSize}}px; }

Grid Size: {{glyphs.grid || 'Unknown'}}

{{glyph.properties.tempChar}} {{glyph.properties.tempChar}} {{tChar}}
#{{glyph.idx + 1}}
  • Ligatures with special characters or numbers may not work as expected in some browsers.

Unicode Symbols

By selecting a Unicode character below, you can assign its code point to your glyph.
You can also use services like emojipedia.org or emojifinder.com to find appropriate characters.

Note that Unicode characters visualization will depend on the character support of your web browser and the fonts installed on your system.

To edit glyph codes, press the button in the toolbar.

To add or edit ligatures, press the button in the toolbar.

Generate SVG, … & More Selection ({{getSelectionCount()}}) Font