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.
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:
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.
