How To Replace Font Awesome Icons With A Custom Icon Set

Font Awesome comes in subsets (Brands, Regular, Solid, Light), and each subset is a font file with hundreds of icons. A typical site uses a dozen of them. Every visitor still downloads the whole file for each subset that is switched on.

If you rebuild only the icons you use as one custom icon set, the browser loads a single small font instead. This is a manual job: Tirenoa helps you find the icons and download them, but you replace them on your pages yourself. It pays off on sites with few icons; on a site with icons on hundreds of pages, switching off unused subsets (the first step below) is usually enough.

In this article: Step 1: Find Out Which Icons You Use · Step 2: Build the Custom Set · Step 3: Replace the Icons on Your Pages · Step 4: Switch Font Awesome Off · Related

Step 1: Find Out Which Icons You Use

  1. Go to Tirenoa › Performance and move to the Tirenoa Icons step of the wizard.
  2. Click Find Recommendations. The scan reads the content of all published and draft items (pages, posts, layout sections, library items), the menu items and the widgets. On a large site this takes a while.
  3. Read the table. Each row is a page, menu or widget, with a link to edit it and the icons found there. The last row, Full List, shows every icon found once.
  4. The wizard also recommends which subsets to keep in the Font Awesome option.

Note: The scan does not read the global options. An icon chosen there is not in the list, so test the site carefully before and after you switch a subset off.

If the scan finds no icons from a subset, you can already remove that subset from the Font Awesome option and click Save Changes. That alone saves one font file per subset, without touching any page.

Step 2: Build the Custom Set

  1. In the Full List row, click an icon name. The icon is downloaded to your computer as an SVG file. Repeat this for every icon in the list.
  2. Open IcoMoon, import the SVG files, select them and generate a font. Give it its own font name and class prefix.
  3. Upload the zip under Tirenoa › Icons. The guide on custom icons describes this in detail.

Note: When you click an icon name, your web server fetches that SVG file from the public Font Awesome repository on GitHub and passes it on to you. This happens only on that click, only in the admin area, and no visitor data is involved.

Step 3: Replace the Icons on Your Pages

Use the table from step 1 as your to-do list. Open each page, menu or widget with its edit link, open the element that holds the icon and pick the same icon from your custom set in the icon picker. Your set has its own tab there.

Do not forget icons that are not on a page: menu items, global elements and library items, layout sections such as header and footer, and off-canvas panels.

When you are done, run Find Recommendations again. The scan should report “No Font Awesome icons found being used. Recommend disabling all.”

Step 4: Switch Font Awesome Off

  1. In the Tirenoa Icons step, remove all subsets from the Font Awesome option, or click Apply All to take over the recommendations.
  2. Set Font Awesome v4 Compatibility to Off. It only supports old icon names and is not needed for a custom set.
  3. Click Save Changes.
  4. Check the site in a private browser window: header, footer, a few content pages, the mobile menu.

The same two options are also in the global options under Advanced › Features. If an icon turns out to be missing, switch its subset back on there; nothing is lost.

Note: An icon that still points to Font Awesome shows as an empty space once its subset is off. That is why the second scan in step 3 matters.