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 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  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.
   
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