BUILD3R.io

Icon Widget

Article3 min readUpdated Feb 23, 2025View source ↗
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.
Was this article helpful?

Still puzzling over something?

The agent has read this article — and everything around it. Ask a follow-up and it answers in seconds.

← Back to Help Center