help center

Search
Close this search box.
On this page

Icon widget

Last Update: August 17, 2023

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 sml Icon widget 1 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 or upload an SVG icon
  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 cog sml Icon widget 1 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. By default, icons are square, which means non-square icons have empty space surrounding them. To prevent this, when you upload an SVG image, enable the option Fit to Size.
    with or without fit to size Icon widget 5
  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

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!