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 Icon Sets the icon. You can use icons from the Jupiter icon library.
Font icon color type Choose between a single and gradient color.
Icon color Sets the icon color.
Icon size Sets the icon size.
Icon align Aligns 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 margin Applies padding to left and right side of the icon.
Vertical margin Applies padding to top and bottom side of the icon.
Circle box Creates a circle container around the icon.
Circle color Sets the circle container color.
Circle border width Changes the border width of the circle container.
Circle border style Sets the style of the border.
Circle border color Sets the color of the border.
Link Makes the whole container clickable.
Link target Choose 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?