Icon Widget

The Icon widget is useful for displaying FontAwesome icons in numerous styles on your page.


There are 3 different views for the widget: Default, Stacked, and Framed.
If Default view is chosen, the following options are available:

Content

  1. Icon: Choose from a list of Font Awesome icons
  2. View: Choose between default, stacked or framed
  3. Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.
  4. Alignment: Align the icon to left, center or right.

Style

Icon

Normal

  1. Primary: Choose the main and secondary colors for the icon
  2. Size: Increase or decrease the size of the icon
  3. Rotate: Rotate the icon

Hover

  1. Primary Color: Set colors for the hover
  2. Hover Animation: Set any animation for the hover state
  3. Size: Set the exact size of the icon
  4. Rotate: Rotate the icon up to 360 degrees

If Stacked or Framed view is chosen, the following options are available:

Content

  1. Icon: Choose from a list of Font Awesome icons
  2. View: Choose between default, stacked or framed
  3. Shape: Choose the shape of the stack or frame, either Circle or Square
  4. Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.
  5. Alignment: Align the icon to left, center or right.

Style

Icon

Normal

  1. Primary Color: Choose the primary color (the background or frame) color for the icon
  2. Secondary Color: Choose the secondary color, which is the color of the icon itself
  3. Padding: Set the padding around the icon to control the size of the stack or frame
  4. Size: Set the size of the icon.
  5. Rotate: Rotate the icon up to 360 degrees
  6. Border Radius: Set the border radius to control the corner roundness of the stack or frame

Hover

  1. Primary Color: Choose the primary color (the background or frame) color for the icon
  2. Secondary Color: Choose the secondary color, which is the color of the icon itself
  3. Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.
  4. Padding: Set the padding around the icon to control the size of the stack or frame
  5. Size: Set the size of the icon.
  6. Rotate: Rotate the icon up to 360 degrees
  7. Border Radius: Set the border radius to control the corner roundness of the stack or frame

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page