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.
Displaying a Font Icon
To add a font icon:
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.
