With “Icon Box” element, you can add an icon box everywhere on your site. Here’s how to do it.
General settings
General settings
- Style: 3 styles (Note: each icon box style goes with its specific settings)
- Character
- Icon
- Images
- Box alignment: 3 alignment styles
- Left
- Center
- Right
- Content: enter content text
- Text color
- Enable “Read More”
- “Read More” link
Heading settings
- Text transform: 3 text transformation styles
- Color
- Font weight (px): enter only the font weight number
- Font family
- Heading: enter heading text
- Text transform: 3 text transformation styles
- None: no text transformation
- Uppercase
- Capitalize
- Letter spacing (px): enter only letter spacing number
- Font size (px): enter only font size number
- Margin bottom (px): enter only bottom margin number
Separator
- Enable separator: check to use separator and open settings for separator
- Separator color
Background settings
- Border color
- Border style: 2 kinds of style
- Theme defaults:no border style
- Use custom border styles: 12 styles
- Solid
- Dotted
- Dashed
- None
- Hidden
- Double
- Groove
- Ridge
- Inset
- Outset
- Initial
- Inherit
- Background image settings
- Background
- Upload image
- Background image styles: 5 styles
- Theme defaults: use default global settings for background. You need to go to Customizer to change settings
- Cover
- Contain
- No repeat
- Repeat
- Box Control: change how the control box looks
- Simplify controls: simplify box control interface
- Hover settings
- Border hover color
- Text hover color
- Background hover color
Settings for each icon box style
Character
- Character
- Character color
- Font family: 2 font family options
- Use default theme font family: use global font family settings. You need to go to Typography on Live Customizer to make font family changes
- Use custom font family: pick up a font from the dropdown list
- Font weight (px): enter only the font weight number
- Font size (px): enter only the font size number
- Margin bottom (px): enter only the bottom margin number
- Character width (px): enter only the character width number. This option is only available if you choose box alignment as “Left”
Icon
- Icon library
- Icon
- Icon color
- Icon hover color
- Icon size (px): enter only the icon size number
- Margin bottom (px): enter only the bottom margin number
- Enable “Box Wrap Icon”: when enabled, you can see the following settings
- Icon box position: 3 positions
- Top
- Left
- Right
- Icon box width: 2 width types
- Predefined width
- Large (80x80px)
- Medium (64x64px)
- Small (48x48px)
- Custom size (px): enter only custom size number
- Predefined width
- Icon box style: 2 styles
- Circle
- Square
- Border color
- Background color
- Border hover
- Background hover
- Link to: enter link a hyperlink
Image
- Upload image
- Border radius (px): enter only border radius number
- Margin bottom (px): enter only bottom margin number
- Image opacity: from 0% to 100%