Icon Box Shortcode

Updated on January 11, 2018

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.

Ken Icon Box Demo 1-icon box shortcode


Displaying an Icon Box Shortcode

To add the icon box shortcode to a page or post, follow steps below:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

icon box shortcode

3In the Add Element pop-up screen, search for Icon Box and click on it to be added to the page.

icon box shortcode

4When the shortcode is added, a new pop-up screen called Icon Box Settings opens. It gives you the ability to configure the shortcode settings.

icon box shortcode

5Click on Save Changes and publish or update the page to check the result.

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.

Did this answer your question?