Icon fonts – your own icons¶
An icon font is a font whose characters are icons. nexxcite ships with the Material Symbols icons; with an icon font definition you add your own set – for example the icons of your corporate design. This chapter describes how you upload an icon font, maintain its icons and use them.
It is intended for administrators who design the look of an application.
1. Icon fonts at a glance¶
| Item | Meaning |
|---|---|
| Icon font | A definition that holds the uploaded font files and the list of its icons |
| Font file | The font in one format (ttf, otf, woff, woff2, eot, svg). The same font can be uploaded in several formats; the browser picks one it supports. |
| Glyph | One icon of the font: a "Name", a "Display Name" and a "Code Point" – the position of the character in the font |
| Built-in fonts | Material Symbols and a second built-in set are part of every installation and need no upload |
Icons are used wherever nexxcite asks for an icon or an image expression: buttons, app bar items, badges, tabs, image blocks and widgets, and the "Icon" of every definition (see Images).
Icon fonts are managed in the Admin Studio under Design → Icon Fonts with the permissions "Open Icon Font Manager", "Add Icon Font", "Edit Icon Font" and "Delete Icon Font" (granted by "System Administrator").
Like images, font files are kept in the storage configured under "Image File Provider" in the global settings (see Global settings). Without it the editor shows "No file provider is configured. Please configure an Image File Provider and Credentials in the Global Settings." A font file you remove in the editor is deleted from the storage when the icon font is saved; closing the editor without saving keeps it.
2. Adding an icon font¶
- Open Admin Studio → Design → Icon Fonts and create an icon font. Give it a name.
- In "Font files", click "Upload font file" and choose the font file.
- If the font has no glyphs yet and the file is a ttf, otf, woff or woff2 file, nexxcite reads the glyphs from the file right away and reports, for example, "312 glyph(s) were read from the font file."
- Check the names of the glyphs and correct them where needed (section 3).
- Save with "Save & Close".
| Item | Value |
|---|---|
| Accepted formats | .ttf, .otf, .woff, .woff2, .eot, .svg |
| Largest file | 20 MB |
| Files per format | one – uploading the same format again replaces the previous file |
| Glyphs read automatically from | ttf, otf, woff, woff2 – not from eot or svg ("Glyphs cannot be read from this format") |
Recommendation: upload woff2 for the browsers and ttf or woff as well if you want nexxcite to read the glyphs. Font files are best taken from the export of your icon tool, together with the names of the icons.
3. Maintaining the glyphs¶
The section "Glyphs (n)" lists the icons of the font with a preview. Select a glyph to edit it.
| Field | Meaning |
|---|---|
| "Name" | Technical name. It forms the CSS class of the icon (section 5). |
| "Display Name" | The name shown in the icon pickers. Users search icons by it. |
| "Code Point" | The position of the icon in the font, as a hexadecimal value, for example e900 |
| Action | Effect |
|---|---|
| "Read glyphs from font" | Reads the glyphs again from an uploaded file. Names you maintained by hand are kept for the code points that are still in the font. |
| "Add glyph" | Adds an icon by hand – for a font from which nothing could be read |
| "Remove" | Removes the selected glyph from the list. The font file is not changed. |
| "Remove all glyphs" | Empties the list |
| Arrow buttons "Move up", "Move down" | Move the selected glyph one position up or down. The order of the list is the order in the icon pickers. |
An invalid code point is rejected with "'…' is not a valid code point. Please enter it as a hexadecimal value (e.g. e900)."
If no glyph can be read from the file, the editor says "No glyphs could be read from the uploaded font file. Please add the icons manually."
4. Using the icons¶
After saving, the icons of the font appear in every icon picker – grouped by font and searchable by their display name:
- in an image expression with the source "Icon Font": first choose the "Icon Font", then the "Icon",
- in the "Icon" of every definition (header of its editor).
An icon follows the text colour and the font size of the place it is drawn in. On image blocks and widgets, "Icon Size" sets its size.
5. Icons in your own HTML and CSS¶
For every icon font nexxcite generates a style sheet. The editor shows the CSS class of the font
("CSS class of this font:"). An icon is drawn with the class of the font plus the class of the
glyph, both starting with nxf-:
<span class="nxf-corporate nxf-corporate-truck"></span>
The class of the font is derived from the technical name of the icon font, the class of a glyph from its "Name". Glyphs with the same name get the code point appended to keep the classes unique.
Renaming the icon font or a glyph changes these classes. Icons chosen in a picker are not affected – they refer to the glyph itself – but class names written by hand into HTML or CSS have to be adjusted.
6. Limitations¶
- A font file larger than 20 MB is not uploaded.
- Glyphs can only be read from ttf, otf, woff and woff2 files. For eot and svg, maintain the glyphs by hand or upload the font in one of the other formats as well.
- The names nexxcite reads from a font are the names stored in the font. Many fonts carry technical names only; give the important icons a readable "Display Name".
- The icons are served to signed-in users only.