Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. In this video tutorial, you will see the various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.
Content Tab
In the content tab, you have full control over the widget’s content.
- View – Set the view of the icon as ‘Default’, ‘Stacked’ or ‘Framed’. Stacked is with a background and framed is with a frame surrounding the icon.
- Choose Icon – Here you have a list of the entire collection of Font Awesome icons.
- Title & Description – Insert the title and description of your Icon Box widget.
- Link to – Insert a link, and choose if it will opens on a new window.
- Icon Position – Set the position of the icon on the left, top or right side of the box (on Mobile view it will stay centered).
- Title HTML Tag – Choose the title tag, from H1..H6, Div, Span or P.
Style Tab
1. Icon
- Primary Color – note that if you choose stacked or framed icon box, you will also have a secondary color.
- Icon spacing – The space between the icon and the heading.
- Icon size – Scale up and down the size of the icon.
- Icon Rotate – Rotate the icon.
2. Icon Hover
Choose the primary and secondary color for the icon hover.
Animation – Choose from a long list of animations for the hover.
3. Content
a. Title
- Alignment – Left, centers, right or justified.
- Vertical Align – Top, middle and button.
- Title Spacing – Set the spacing between the title and the description.
- Title color – Change the color of the title.
- Typography – Here I can customize the typography of the title.
b. Description
- Description color – Change the color of the description.
- Typography – Choose custom to change the typography, just like with the title.
Advanced
Set the Advanced options that are applicable to this widget