Font Icons Shortcode

Last Updated on

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

Note: There is no built-in feature in the theme to add custom icons and it can only be done manually by editing the theme files.

In this article

Displaying a Font Icon

To add a font icon:

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

Font Icons Shortcode - visual composer screen

In 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

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

Click 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.
Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you can add a custom CSS class in the Extra Class Name setting to be able to add specific styling to the shortcode through CSS. For more information, read the Adding a custom CSS class to a shortcode article.

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.

Note: If you want to add an icon beside some text, you need use Icon Box element. Refer to this article to find more information about it.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket