Icon Element

Last Update: March 13, 2024

The Icon Element, (formerly the Font Awesome Icon Element) was renamed back way in Avada 6.2. This was because of the added ability to add custom icon sets to Avada, which this element can then access. For more details on that, please see How To Upload And Use Custom Icons in Avada.

But regardless of the name change, this element is still a great way to add any of the thousands of free Font Awesome Icons to your content, as well as any custom fonts you want to upload. And if that’s not enough for you, you can now import custom Icon sets directly from Avada Studio. And if you’re a total icon freak, there is also Font Awesome Pro Integration in Avada, giving you access to 22,000+ Font Awesome Icons through the Avada Builder.

A full set of styling options in this Element allow you to select icon size, weight, color, background, rotation, spinning and more. And every one is 100% full vector, so they look incredibly sharp and are retina-ready! Read below for an overview of the specific features of this awesome Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Icon Element

The Icon Element allows you to place icons anywhere on your site. Just add the Element to your desired column.

There are three tabs in the Icon Element. The first one, General, is where you choose your font, and make some basic settings to do with size, functionality, and alignment. The Icon picker was also updated with Avada 6.2 to show any installed icon sets, both Font Awesome Icon sets and Custom Icon sets. The Design tab is where you configure your selected icon’s appearance with margin, circle, color, background, and border options. The Extras tab offers animation options that allow you to determine how the icon interacts with the loading of the page.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Icon. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Select IconClick an icon to select, click again to deselect.
Icon SizeControls the size of the icon. In pixels.
Flip IconChoose to flip the icon.
Rotate IconChoose to rotate the icon.
Spinning IconChoose to let the icon spin.
LinkAdd the url the icon should link to.
Link TargetControls how the link will open.
AlignmentSelect the icon's alignment.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginSpacing around the icon. In px, em or %, e.g. 10px. NOTE: Leave empty for automatic margin calculation, based on alignment and icon size.
Icon ColorControls the color of the icon.
Icon BackgroundTurn on to display a background behind the icon.
Icon Background SizeControls the background size of the icon. Set to -1 to use default calculations. In pixels, ex: 35.
Icon Background ColorControls the color of the icon background.
Icon Background Border Size
Icon Background Border ColorControls the color of the background border.
Border RadiusEnter values including any valid CSS unit, ex: 10px.
Icon Hover Animation TypeSelect the animation type for icon on hover. Select default for Global Options selection.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article