View the new Sparky Page Builder introductory video. Watch now

Powered by the popular FontAwesome icon set (which is also integrated into Joomla), this block allows you to insert any icon from this collection and style it (1,600+ icons available).

When a new icon block is created, a small rounded "checkmark" icon is added to the page. Click on the block settings icon opens the icon block settings where you can change the icon itself and icon block settings.

Cog Icon Block Settings

Icon settings

Icon ID

Unique identifier of this block. It's useful for CSS or custom coding. If you don't need this, leave this field empty.

Category

There are 3 categories of icons (solid, regular, and brands) and a correct category should be selected (otherwise, the icon won't be displayed).

Icon Name

You should enter an icon name in this field (actually it's the icon's class name). All icons (1,600+) are presented on the FontAwesome website. When you find an icon from the free collection on their website, click on it. The icon name will be displayed as a heading of the icon page. So, if you want to use, for example, the Apple Pay icon, enter "apple-pay" in the Icon Name field.

Font Awesome

Color

Select an icon color using the color picker or by entering the HEX value manually.

Size

Enter icon size value and units. Correct values will be, for example, 50px, 100px, 2em, 3rem, etc.

Icon Align

By default, the icon is not aligned. Using this option, you can align it to the left or to the right or make it centered.

Icon Link

Your icons can be linked. If you enter an URL in this field, the icon will be linked to this URL.

Target

If you entered a link for your icon, in this option you can select whether to open it in the same or new window.

Example

Icon block examples

Block Operations

To learn how to duplicate, move and delete blocks, visit the Blocks page of the Page Layout section.