Icons

This is the Act21 Icon custom module:

Act21 Custom Module

Adding an icon

Go to https://fontawesome.com/icons?d=gallery&m=free (or https://fontawesome.com/icons?d=gallery if you integrated Pro) and click the icon you need:

Act2 Font Awesome Icon Sample

Then copy its code:

Act2 Font Awesome Code Sample

And paste it into your icon module in your template:

Act2 Template Builder Font Awesome Icon Code

Or in your page:

Act2 Page Editor Font Awesome Icon Code

Instead of a Font Awesome icon you can also add up to three characters, with a code like this:

<i>1</i>

Act2 Page Editor Number Icon Code

Please also see the Font Awesome asset.

Module options

Style

Act21 Icon Style

Dot Act2 Icon Dot Sample
Circle Act2 Icon Circle Sample
Disc Act2 Icon Disc Sample
Unstyled Act21 Icon Unstyled

Color

Act21 Icon Color

Size

Act21 Icon Size

Act21 Icon Size Samples

Link

Add an anchor #some_id_on_the_page, relative URL /about-us or a full URL https://hubspot.com

Act21 Icon Link

Custom class

Use this box if you want to add a custom class to your Icon module at the page level.

Act21 Icon Custom Class

Alignment and spacing

You can use one of the alignment utility classes to align your icon:

Act2 Template Builder Icon Alignment Class

To add some space at a side or around your icon you can use the padding utility classes:

Act2 Template Builder Icon Padding Class

Using Act2 with the old Design Manager? Read this documentation.