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.
- Title HTML Tag – Choose the title tag, from H1..H6, Div, Span or P.
Style Tab
Box
- 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).
- Alignment – Left, centers, right or justified.
Icon
Choose a Normal (default) and Hover style for the icon.
Normal
- 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.
Hover
- Hover Animation – Choose from a long list of animations for the hover.
- 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.
Content
Title
- Title Spacing – Set the spacing between the title and the description.
- Title color – Change the color of the title
- Typography – Customize the typography of the title
- Text Stroke- Color the outline of your text
- Text Shadow – Add texture to the text by adding shadow
Description
- Description color – Change the color of the description
- Typography – Customize the typography of the description
- Text Shadow – Add texture to the text by adding shadow
Advanced
Set the Advanced options that are applicable to this widget