Icons add visual meaning to your website elements. Get the freedom to use your own custom icons and craft your site as your own. Instead of fiddling around with custom code now, you can easily upload and use your own customs icon pack with SP Page Builder.

Please note you can only upload your own custom icon pack made with IcoFont, IcoMoon, and Fontello.

Upload Your Custom Icon to SP Page Builder

Adding custom icons allows you to bring your own style and branding to SP Page Builder. Follow these steps to create and upload your icon set easily.

Step 1: Create and Download Your Custom Icon Package

1. Go to IcoMoon App.

2. Select the icons you want to include in your custom font. You can use icons from IcoMoon’s library or import your own SVG files.

3. Once your selection is ready, click Generate Font.

4. Before downloading, open Preferences to adjust settings such as font name, class prefix, or version. 

Note: Do not use “icon” as the prefix name, as it can cause conflicts in Joomla 5 and newer versions. Use a unique prefix instead to ensure your custom icons load correctly.

5. Click Download to get a .zip file containing your custom icon font and supporting files.

Step 2: Upload the Icon Package to SP Page Builder

1. From your Joomla administrator dashboard, open SP Page Builder > Settings.

2. In the left sidebar, select Custom Icons.

3. Click the Upload Icon button.

After uploading, SP Page Builder will automatically register the new icons. You can then use them in addons such as Icons, Group Icons, Buttons, and more throughout your pages.

How to Fix IcoMoon Override Issues After Upgrading to Joomla 5

If your existing IcoMoon custom icons don’t appear correctly after upgrading to Joomla 5, you may need to update your icon CSS classes manually.

1. Locate your icon directory.
   The icon files are stored within your Joomla project directory. Depending on your setup, the path may look like this:
   Example path:
   project_directory > media > com_spagebuilder > assets > iconfont > icomoon.

Here, project_directory refers to the root folder of your Joomla site where all template and site files are located.

2. Open the style.css file inside that folder.

3. Add a prefix to your icon selectors.

Note: Joomla 5 uses the icon- prefix in its core files. Using icon as a prefix for custom icons can lead to conflicts, so it should be avoided.

For example, if your icon is named .custom-googlehangouts, modify it as follows:

i.custom-googlehangouts:before {

  content: "\e900";

  color: #0c9d58;

}

• Here, the i selector as a prefix increases the specificity thus solves the override issue

4. You have to repeat this for each of your icons used.

5. Save the file and refresh your SP Page Builder pages.

Your icons should now load and display properly again.