The icon box shortcode is one of the shortcodes available in Ken theme which you can take advantage of. It allows you to create a box with an icon and add description to it. In this article we’ll describe how to add the icon box shortcode, how to style it and configure the settings.
Displaying an Icon Box Shortcode
To add the icon box shortcode to a page or post, follow steps below:
Configuring the Icon Box Settings
There are some general settings in icon box settings pop-up.
| Setting | Description |
|---|---|
| Icon Type | Use this option to decide if you want to use the icons library to add an icon for the shortcode or if you want to upload your own icon image. Available options are: Icon, Image |
| Add Icon Class Name | This option will be available if you choose Icon for Icon Type. Use this option to add the icon class name that you want to have in the shortcode. To see a graphical representation of icons and a reference to their class names, please go to Main Dashboard Menu -> Tools -> Icons Library. |
| Icon Image | This option will be available if you choose Image for Icon Type. Use this option to upload or select an image from the media library for the icon box shortcode. |
| Title | Use this option to add a title for the icon box. |
| Description | Adds a description for the Icon Box. The default WordPress editor will be available for you in this option, in case you want to fine tune the styling of description. |
| Read More Text | Adds a read more text for Icon Box. If you don’t want to have read more option, simply set this option to blank. |
| Read More URL | Adds Read More link to the Icon Box. You need to add https:// at the beginning of the URL. |
| Link Target | Set the Target for the Read More URL, Available options are: Same window, New window. |
Configuring the Icon Box Styling
To style your icon box you’ll find these settings in the icon box pop-up window:
| Setting | Description |
|---|---|
| Style | Use this option to set the style of Icon Box shortcode. Available options are: Style 1, Style 2, Style 3, Style 4, Style 5, Style 6, Style 7 (New). To see a live demo of the box styles we introduced please click here. |
| Icon Container Circle? | Enable this option if you are interested in having a round icon container box. If you disable this option, the container will be square. |
| Icon Container Frame? | This option will be available only if you select Style 7 in Style. Enable this option to have a frame for the icon box. If you disable this option, the box background color will be given to the icon color. |
| Icon Align | This option will be available for Box Styles 2 and 7. The top option is applicable for Style 7 only. Use this option to set the alignment for the icon box. Available options are: Left, Right, Top (Style 7) |
| Icon Size (Style 7 only) | This option will be available for Box Styles 7. This option is only available if you set the icon type to Icon and not Image. Use this option to set the icon size for the icon box. Available options are: Small (32px), Medium (48px), Large (64px) |
| Icon Skin | Use this option to set the color of the icon for styles 1, 2, 3 and 5. This option will set the icon frame fill color for styles 4, 6, and 7. |
| Title Color | Sets the color of Icon box Title. |
| Paragraph Color | Sets the paragraph color of Icon Box description. |
| Button Skin Color | Use this option to set the skin color for the icon box shortcode button. |
| Button Hover Text Color | Use this option to set the skin color for the icon box shortcode button on mouseover. |
Title Text Size |
Use this option to adjust the Title text size of the icon box. |
Paragraph Text Size |
Use this option to adjust the Paragraph text size of the icon box. |
Adding a Viewport Animation
To make the Icon Box shortcode visible on scroll with animation, there is a setting in Icon Box settings pop-up which is called Viewport Animation. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read the Configuring shortcode’s entrance animation article.
Adding an Extra Class Name
The Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read the Adding custom CSS class to a shortcode article for further explanation.
