How To Upload And Use Custom Icons

Tirenoa ships with the Font Awesome icons. When you need icons that are not in there, such as your own pictograms, product symbols or a brand set, you can upload them as a custom icon set. The icons then appear in the icon picker next to the built-in ones.

Custom icon sets are icon fonts made with IcoMoon, a free web app. That is the only supported tool: Tirenoa reads the package IcoMoon exports. The files are stored on your own site; visitors’ browsers do not connect to IcoMoon.

In this article: Prepare the Icon Set in IcoMoon · Upload the Set · Use the Icons · Change a Set Later · Related

Prepare the Icon Set in IcoMoon

  1. Open the IcoMoon app and select the icons you want, or import your own SVG files and select those.
  2. Choose to generate a font.
  3. Open the font preferences before you download. Give the font its own font name and its own class prefix, for example acme-.
  4. Download the font. You get one zip file. Do not unpack or rename its contents.

Note: Every icon set on the site needs a unique font name and a unique class prefix. IcoMoon’s default prefix is the same for every download, so two sets left on the default would clash. The prefix tiaroa- is reserved for the Builder’s own interface icons.

Upload the Set

  1. Go to Tirenoa › Icons.
  2. Type a name into Enter Icon Set Name and click Create New Icon Set. This is the name you will see in the icon picker.
  3. You land on the edit screen of the new set. Drop the zip file onto the Drop zip file to upload area, or click Select File.
  4. The file uploads and the icon set saves itself. When the screen reloads, it shows a preview of all icons with their names, the CSS Prefix and the Icons Count.

Only zip files are accepted. If a set with the same prefix already exists, a notice “Icon set with same CSS prefix already exists!” appears. Go back to IcoMoon, change the prefix and upload the new download.

Use the Icons

Open any option with an icon picker, for example in the Icon, Button, Checklist or Content Boxes element. Your set has its own tab in the picker, labeled with the name you gave it. Click an icon to select it. The picker’s search covers custom icons too.

On the front end the icon styles are added to the site’s compiled styles, so no extra setup is needed. The icon styles are also loaded on the WordPress menu screen and in the global options.

Change a Set Later

  • Add or replace icons: open the set under Tirenoa › Icons and click Update Custom Icon Set, upload or choose the new zip in the media window, then click Update to save the set. Keep the same class prefix and icon names, or icons already placed on pages will no longer show.
  • Continue from the existing set: the Download link on the edit screen gives you the set’s selection.json file. Import it into IcoMoon to get back exactly the icons you uploaded, then add to them.
  • Remove a set: move it to the trash on the Icons screen. Icons from that set stop showing on the site, so replace them on your pages first. Deleting it permanently also deletes its files.

Note: If the front end still shows the old icons after you changed a set, reset the Tirenoa caches.