Icon Text Shortcode

Updated on January 9, 2018

The icon text shortcode is one of the shortcodes available in Ken theme which you can take advantage of. It allows you to create a text with an icon. In this article we’ll describe how to add the icon text shortcode, how to style it and configure the settings.

Ken Icon Text Demo 3-icon text shortcode

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

Displaying Icon Text Shortcode

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

1Add a new page or edit an existing page.

2From the Visual Composer screen, click on the + button.

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

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

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

Configuring the Icon Text Settings

There are some general settings in icon text settings pop-up.

Setting Description

Default Text Sets the default text for icon text.
On Hover Text Sets the text for the icon text on mouseover.
Link Use this option to turn the icon into a link. You need to add http:// at the beginning of the URL. If you don’t want to have a link in the icon, just set this option to blank.
Link Target Use this option to decide if you want the icon link to open in the same window or in a new one. Available options are: Same Window, New Window.
Add Icon Class Name 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 -> Ken -> Icon Library.

Configuring the Icon Box Styling

To style your icon text you’ll find these settings in the icon text pop-up window:

Setting Description

Skin Sets the icon text shortcode skin. Available options are: Dark, Light, Custom.
Custom Color This option will be available if you set the skin of the icon text to Custom. Use this option to set the color of the icon text.
Default Text Font Weight Sets the font weight of the default text for the icon text.
Default Text Font Size? Sets the font size of the default text for the icon text.
On Hover Text Font Size Sets the font size of text for the icon text on mouseover.
On Hover Text Line Height Sets the spacing between the lines of text for the icon text on mouseover.
On Hover Text Font Weight Sets the font weight of the text for the icon text on mouseover.
Icon Size Sets the icon size for the icon text shortcode. Available options are: 48px, 64px, 128px.

Adding a Viewport Animation

To make the Icon Text shortcode visible on scroll with animation, there is a setting in Icon Text 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.

If you have any questions regarding the Icon Text shortcode, feel free to contact our support team.

Did this answer your question?