Font Awesome Icon Element

13/03/2019

The Font Awesome Icon Element is a great way to add any of the 1,500 Free Font Awesome Icons to your content. A full set of styling options allow you to choose any 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! New for Avada 5.8 is Font Awesome Pro Integration, giving you access to 5,000+ Font Awesome Icons through the Fusion Builder. 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 More Examples!

How To Use The Font Awesome Icon Element

The Font Awesome Icon Element allows you to place icons anywhere on your site. Be sure to visit the Element Demo Page for more examples of what it can do.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 - Select the container and column you would like to place the icon into.

Step 3 - Click on the + Element button at the bottom of the column. Select Font Awesome Icon.

Step 4 - There are three tabs in the Font Awesome Icons Options. The first one, General, is where you choose your font, and make some basic settings to do with size,functionality and alignment. The Design tab is where you configure its appearance with margin, circle, color, background and border options. The animations tab allows your to determine how the icon interacts with the loading of the page.

Step 5 - Once you have completed styling your Font Awesome Icon, click Save. You will be returned to the edit page. You can preview the page to view your icon, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: 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 in your Theme Options > Fusion Builder Elements > Font Awesome Element section. 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.
  • Size of Icon - 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.
  • Alignment - Select the icon's alignment. Choose from Text Flow, Center, Left, or Right.
  • Element Visibility - Allows you to control the Element's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
  • 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 Screen

Design 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 in Circle - Choose to display the icon in a circle.
  • Icon Color - Controls the color of the icon.
  • Icon Circle Background Color - Controls the color of the circle.
  • Icon Circle Border Color - Controls the color of the circle border.
View The Options Screen

Animation Tab

  • Animation Type - Controls the column's animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.
  • 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 1.
  • 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 Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Font Awesome Icon Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Icon Circle Background Color - Controls the color of the circle background.
  • Icon Circle Border Color - Controls the border color of the circle background.
  • Icon Color - Controls the color of the icon.
View The Options Screen

Font Awesome Icon Element Parameters

Copy to Clipboard
    • icon - A font awesome icon value. For example, fa-glass.
    • size - Accepts a pixel value. For example, 18px. Sets icon size.
    • flip - Choose from none, horizontal, or vertical. Set's the icon's flip direction.
    • rotate - Choose from none, 90, 180, or 270. Sets the icon's rotation angle.
    • spin - Choose from yes, or no. This will enable or disable the icon's spinning animation feature.
    • alignment - Choose from left, right, or center. Sets the icon's alignment.
    • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • margin_top - Accepts a pixel value. For example, 5px. Sets the top margin.
    • margin_right - Accepts a pixel value. For example, 5px. Sets the right margin.
    • margin_bottom - Accepts a pixel value. For example, 5px. Sets the bottom margin.
    • margin_left - Accepts a pixel value. For example, 5px. Sets the left margin.
      • circle - Choose from yes, or no. Enables or disables the icon's background.
      • iconcolor - Accepts a hexcode ( #000000 ). Sets the icon's color.
      • circlecolor - Accepts a hexcode ( #000000 ). Sets the icon's background color.
      • circlebordercolor - Accepts a hexcode ( #000000 ). Sets the icon's border color.
      • animation_type - Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
      • animation_direction - Choose from down, right, left, up, or static. Sets the animation's incoming direction.
      • animation_speed - Accepts a numerical value from .1 (fastest), to 1, (slowest).
      • animation_offset - Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
      • class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.
      • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.