Icon Box

The Icon Box Element allows you to display the text with different icons wherever on your website. To use the Icon Box Element be sure that you are working on an Elementor page template.

Add the Icon Box Widget to a Page

Activate the Elementor Page Builder >> Go to Pages >> Add a New Page >> Select the Elementor page template from the Page Attribute section as showing in the below screenshot:

Then click the Edit with the Elementor button to edit the page with the Elementor page builder.

After clicking on the Edit with Elementor button you will redirect to the Elementor page builder to see the Elementor Page Builder section appear. Drag and drop the Icon Box widget from the Houzez Elements section to the page as showing in the below screenshot:

Icon Box Content Settings

Once you have dragged the element on the page, you will see the element options in the left tab and you will see the content settings. 

Please click the Add item button to add the icon box on your page.

1. Icon Type: You can choose from FontAwesome or upload a custom image
2. Icon: Please set an icon. Note: Houzez is compatible with Font Awesome v.4.7.0. The entire list of icons can be found on the FontAwesome project page. For example, if an icon is named ‘fa-angle-right’, the value you have to add inside the field is ‘angle-right’.
3. Title: Enter title
4. Text: Enter description
5. Read More Text: Enter the text for reading more
6. Read More Link: Enter the link for reading more text

Icon Boxes Content Style Settings

1. Style: Select the icon box style (Version 1 and version 2)
2. Columns: Select the number of columns
3. Padding: Add the padding between icon, text, and button
4. Border Type: Add the border around the icon box
5. Border Radius: Add the border radius.
6. Background Type: Select the background type as Classic or Gradient

Icon Boxes Styling Settings

1. Icon Color: Select the icon color.
2. Icon Size: Add the icon size
3. Icon Padding: Add the padding around the icon
4. Icon Rotate: Add the icon rotates degree
5. Title Spacing: Add the spacing between title
6. Title Text Color: Select the title text color
7. Title Typography: Select the title font.
8. Description Text Color: Select the Description text color
9. Description Typography: Select the description text font
10. Read more Text Color: Select the read more button text color
11. Read More Typography: Select the read more text font