Part of the front page template contains a section to display Icon Boxes:
You get 3 icon boxes, each are customizable using the available settings in the customizer. How you customize your boxes will be up to you as you can enable/disable each element:
- Icon
- Title
- Introduction Content
- Button
Remeber that these only show on the front page when using the Front Page Template. However, if you decide to go for the Pro version of Relative, you get an Icon Box widget that you can use in most, if not all of the sidebar positions. You can then publish them on other areas of your website too.
Font Awesome Icon Library
The icons used in this theme are based on Font Awesome version 4.0, so the icon classes we will be using are going to be compatible with this theme as we are using Font Awesome within it.
NOTE: The Font Awesome website now displays the version 5 icons (the pro version of this theme uses v5), but version 4 are hidden on their website. Click the button below to get the icon codes. I would recommend bookmarking that page.
Create Your Icon Boxes
- Go to Appearance >> Customize >> Front Page Template >> Icon Boxes
- Show the Icon Boxes by going to the “Show Icon Boxes Section” setting:
- Enter in your icon choice (visit the font awesome website link above). For example, the format will be fa fa-picture-o
If you look at your live view in the customizer and if you are on the front page, you would see the icon show up like this:
- Enter in a title for your icon box:
- Enter in an introduction for your icon box:
- Add a background colour to your icon box:
- Add a colour to your icon:
- Add a background colour for your icon:
- Set your iconbox text colour (title and content)
- Set your iconbox button label:
- Set your iconbox button link.
- Set your icon box button colours:
- Repeat setps 1 to 11 for the remaining two icon boxes.
- Click “Save & Publish“