Icon Box Shortcode

Updated on October 8, 2017

The icon box shortcode is one of the shortcodes available in Jupiter 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.

To see an Icon Box shortcode in action, you may check the demo page.

Icon box shortcode - demo


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 - visual composer screen

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

Icon box shortcode - add element

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.

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

Replace Icon Sets the icon.
Title Adds a title for the Icon Box.
Title Font Size Sets the font size of the Icon Box title.
Title Font Weight Sets the font weight of the Icon Box Title
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.

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: Simple minimal, Simple Ultimate, Boxed.
Icon Size Sets the icon size for the Icon Box. Available options are: Small, Medium, Large, X Large
Circle container Enable this option if you want your icon to be contained by a circle frame. This option will only work for icon size of Small and Medium.
Icon Color Sets the icon color inside Icon Box.
Icon Container (Circle) Background Color This option will be available if you enable the Circle Container option. Use this option to set the icon container background color.
Icon Container (Circle) Border Color This option will be available if you enable the Circle Container option. Use this option to set the icon container border color. If you don’t want the container have a border, please set this option to blank.
Title Color Sets the color of Icon box Title.
Paragraph Color Sets the paragraph color of Icon Box description.
Paragraph Link Color Sets the color of any probable links you may add in description section.
Margin Bottom Adds a spacing between this Icon Box and the next shortcode.

Configuring the Visibility for Devices

To hide/show the Icon Box for a particular device (mobile, tablet, …), there is a setting in Icon Box pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read the Configuring shortcode’s visibility article.

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?