The Icon Element, (formerly the Font Awesome Icon Element) was renamed back 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 1,609 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 7,800+ 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.,IMPORTANT NOTE: Font Awesome Pro requires an annual subscription, please check their site for detailed information & pricing.,View Element Demo Page!,OverviewHow To Use The Icon ElementElement OptionsGlobal Options,How To Use The Icon ElementThe Icon Element allows you to place icons anywhere on your site.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Icon from the Elements List.
Step 4. 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.
Step 5. Once you have completed styling your Icon, click Save.
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
Select Icon – Click an icon to select, click again to deselect. Use the Plus symbol to add a custom icon set.
Icon Size – Set the size of the icon. In pixels (px), ex: 13px.
Flip Icon – Choose to flip the icon.
Rotate Icon – Choose to rotate the icon.
Spinning Icon – Choose to let the icon spin.
Link – Add the url the icon should link to.
Link Target –_self = open in same window, _blank = open in new window.
Alignment – Select the icon』s alignment. Choose from Text Flow, Center, Left, or Right. This setting now has Responsive Options. See the Responsive Option Sets document for more info.
Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose 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 Class – Allows you to add a class for the Element.
CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Margin – Spacing around the font awesome icon. In px, em or %, e.g. 10px. Note: Leave empty for automatic margin calculation, based on alignment and icon size.
Icon Color – Controls the color of the icon.
Icon Hover Color – Controls the hover color of the icon.
Icon Background – Turn on to display a background behind the icon.
Icon Background Size – Controls the background size of the icon. In pixels.
Icon Background Color – Controls the color of the icon background.
Icon Hover Background Color – Controls the hover color of the icon background.
Icon Background Border Size – Controls the size of the background border.
Icon Background Border Color – Controls the color of the background border.
Icon Hover Background Border Color – Controls the hover color of the background border.
Border Radius – Enter values including any valid CSS unit, ex: 10px. Leave empty for default values.
Icon Hover Animation Type – Select the animation type for icon on hover. Choose from Fade, Slide or Pulsate.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Icon
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Icon Font Size – Controls the size of the icon. In pixels.
Icon Color – Controls the color of the icon.
Icon Hover Color – Controls the hover color of the icon.
Icon Background – Turn on to display a background behind the icon.
Icon Background Color – Controls the color of the icon background.
Icon Hover Background Color – Controls the color of the icon background on hover.
Icon Border Size – Controls the border size of the icon.
Icon Background Border Color – Controls the border color of the icon background.
Icon Hover Background Border Color – Controls the border color of the icon background border on hover.
Border Radius – Set the border radius.
Icon Hover Animation Type – Controls the hover effect of the icon. Choose from Fade, Slide, or Pulsate.
View The Options Screen