Promo 1 - Get our lifetime membership, all themes, and updates forever for only 95 USD.
Promo 2 - Get a free pro theme when you host with us.

An introduction to the Icon Boxes

Part of the front page template contains a section to display Icon Boxes:

r iconboxes

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.

Version 4 Icon Reference

Create Your Icon Boxes

  1. Go to Appearance >> Customize >> Front Page Template >> Icon Boxes
  2. Show the Icon Boxes by going to the “Show Icon Boxes Section” setting:
    rp show iconboxes
  3. Enter in your icon choice (visit the font awesome website link above). For example, the format will be fa fa-picture-o
    r iconbox iconIf 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:
    r iconbox icon demo
  4. Enter in a title for your icon box:
    r iconbox title
  5. Enter in an introduction for your icon box:
    r iconbox intro
  6. Add a background colour to your icon box:
    rp set iconbox bg
  7. Add a colour to your icon:
    rp set icon colour
  8. Add a background colour for your icon:
    rp set icon bg
  9. Set your iconbox text colour (title and content)
    rp set iconbox text colour
  10. Set your iconbox button label:
    r iconbox button
  11. Set your iconbox button link.
    r iconbox link
  12. Set your icon box button colours:
    rp set button colours
  13. Repeat setps 1 to 11 for the remaining two icon boxes.
  14. Click “Save & Publish