The Icon widget enables you to add and customize icons on your webpage. The widget offers three different views: Default, Stacked, and Framed.
Adding Icon widget
- Find the Icon widget under the Elements section of your 10Web Builder page.
- Drop the widget onto your preferred location on the canvas.
Content tab
When Default view is selected, the following options are available:
- Icon: Choose from a wide range of Font Awesome icons that best fit your webpage's design and purpose.
- Link: Attach a URL to your icon for direct navigation. You can also configure the link to open in a new window or add a nofollow attribute.
If Stacked or Framed view is chosen, the following options are available:
- Icon: Select from a range of Font Awesome icons or upload an SVG icon.
- Shape: Determine the shape of the stack or frame, either Circle or Square.
- Link: Input the URL for the item’s link. Use the Link Options cog to either add nofollow to the link or to open the link in a new window.
Style tab
Normal Style:
- Alignment: Align your icon to the left, center, or right within its container.
- Primary Color: Customize the main and secondary colors of your icon.
- Secondary Color: Set a secondary color to complement the primary color of your icon.
- Size: Increase or decrease the size of the icon to fit your layout.
- Padding: Add space around the icon to ensure it fits well within its container.
- Rotate: Rotate the icon up to 360 degrees.
- Border Radius: Modify the border radius to create rounded corners.
Hover Style:
- Primary Color: Set a different color that appears when the mouse hovers over the icon.
- Secondary Color: Customize a secondary color that is displayed on hover.
- Hover Animation: Choose from various animations to apply to your icons on hover.
These features make the Icon widget a great tool for making your website better by adding useful and good-looking Font Awesome icons that match your design style perfectly.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.