Icon

Table of Contents

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

Powered by BetterDocs