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

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

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

Font Icons Shortcode - visual composer screen

3
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

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

5
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 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.
x
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.

Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket