Font Icons Shortcode

Updated on December 20, 2018

Choose an icon from many of the available font icon libraries and make them look even better with the font icons shortcode. This shortcode allows you to customize the default styling of the icons, create containers and make them clickable.

To see the font icons shortcode in action, check out the demo page.

Font Icons Shortcode - demo


Displaying a Font Icon

To add a font icon:

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

Font Icons Shortcode - visual composer screen

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

Font Icons Shortcode - add element

4When the shortcode is added, a new pop-up screen called Font Icons Settings will open. From the “Add Icon” option, add your icon.

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

Configuring the Icon Settings

There are a few settings to add and configure the icon in the font icons settings pop-up.

Setting Description

Add IconSets the icon. You can use icons from the Jupiter icon library.
Font icon color typeChoose between a single and gradient color.
Icon colorSets the icon color.
Icon sizeSets the icon size.
Icon alignAligns the icon.

Configuring the Container

The container in this case is a circle which contains your icon. Enabling it gives you more options to style the shortcode.

There are a few settings in font icons settings pop-up to configure the icon’s container.

Setting Description

Horizontal marginApplies padding to left and right side of the icon.
Vertical marginApplies padding to top and bottom side of the icon.
Circle boxCreates a circle container around the icon.
Circle colorSets the circle container color.
Circle border widthChanges the border width of the circle container.
Circle border styleSets the style of the border.
Circle border colorSets the color of the border.
LinkMakes the whole container clickable.
Link targetChoose between opening the link in a new window or the same window.

Adding an Entrance Animation

To make the font icons visible on scroll with animation, there is a setting in the font icons settings pop-up called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring a shortcode’s entrance animation article.

Did this answer your question?