The icon block

Add icons to your posts and pages using the Mai icon block.

To insert a Mai icon block into your post or page…

• click the add block (+) plus icon
• expand the widgets tab
• select the Mai icon block

Search for an icon

Now the icon block is in my page. But I still need to use the search box or drop down list, in the block settings sidebar, to search for the icon I want to use.

The block settings sidebar has two tabs, icon and styles. I selected the icon tab and used the search box to find the icon I wanted to use. I wanted a pen icon, so I searched for pen.

The settings I chose in the Icon tab

The settings I chose were…

• Style: light
• Display: Block
• Align: Center
• Size: 100 (you will want a smaller icon)

The settings I chose in the styles tab

In the styles tab I chose…

• Icon Color: White
• Background Color: Blue
• Box Shadow Color: Grey
• X Offset: 7 and Y Offset 5
• padding: 30

The settings will depend on the size you use for your icon

In these screenshots I used a very large icon, 100px.

If you use a much smaller icon size, 30px for instance, adjust the offset and padding settings to suit.

The more you experiment, the more you’ll learn.

In the example layout below I stacked an icon, heading and paragraph in a three column grid.