• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Mai Reach Theme

A Genesis User Guide

  • Home
  • Tutorials
  • Videos
  • Images
Main hero header image for Mai Reach theme tutorial site.

The icon block

You can use Font Awesome icons in your page layouts.

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
Insert a Mai icon widget block into your page.

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.

Icon Examples

Writing

This is some demo text below an icon and heading block.

Editing

This is some demo text below an icon and heading block.

Publishing

This is some demo text below an icon and heading block.

Category: Mai Reach Theme Tutorials
Next Post: You can show, hide and rearrange page elements »

Learn more about Mai Reach theme

(It’s one of the new generation from BizBudding)

Mai Reach Theme

Mai Reach Tutorials

Mai Reach is one of the new generation of themes by BizBudding. They’re the people behind Mai Lifestyle, one of the most popular themes on StudioPress.

Mai Reach Tutorials

Template Parts

Template parts replace many of the widget areas in this block based theme.

Find out more about…

Template Parts

Genesis Framework

Mai Reach is built on the Genesis framework. Genesis is a good solid foundation for your website.

If you’d like to know more about Genesis read this.

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by BizBudding, StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress, WP Engine and BizBudding are registered trademarks of their respective owners.