Add one of the following group of classes to a Custom HTML module:

icon-dot theme Act2 Icon Dot Sample
icon-circle theme Act2 Icon Circle Sample
icon-disc theme Act2 Icon Disc Sample

Act2 Template Builder Custom HTML Module Edit CSS Options

Act2 Template Builder Icon CSS Class


To change the color of your icon use one of the availabe classes:


Act2 Template Builder Icon Color Class


Add large or small to change the size of your icon:

Act2 Template Builder Icon Size


You can use one of these classes to align your icon:

CSS Class Description
tc Center
tr Right
tl Left

Act2 Template Builder Icon Alignment Class


To add some space at the top, right, bottom or left of your icon, you can use the padding utility classes. For example, if you want to add 30px right padding: icon-disc theme pr30

Find all utility classes here.

Adding an icon

Once your Custom HTML module is ready you can add an icon:

Go to https://fontawesome.com/v4.7.0/icons/ 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 Custom HTML module in your template:

Act2 Template Builder Custom HTML module Edit HTML

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 a number, with a code like this:


Act2 Page Editor Number Icon Code

Please also see the Font Awesome asset.

Using Act2.1 with the new Design Tools? Read this documentation.