1. Purpose
The Icon widget lets you insert and style icons in your layouts using Font Awesome or uploaded SVGs. It’s ideal for enhancing buttons, feature boxes, services sections, or navigation cues.
2. Display Modes
Default: Displays the icon by itself with no additional container.
Stacked: Places the icon over a solid background shape (circle or square).
Framed: Wraps the icon inside a bordered shape.
3. Content Settings
Icon Selection: Choose from the icon library or upload an SVG (available in stacked/framed modes).
View: Select the display mode — default, stacked, or framed.
Shape: Choose between circle or square when using stacked or framed modes.
Alignment: Align the icon left, center, or right.
Link: Optionally turn the icon into a clickable link, with control over opening in a new tab and search engine visibility.
4. Styling Options
For Both Normal and Hover States:
Primary Color: Controls the color of the icon itself.
Secondary Color: Sets the background or frame color in stacked or framed modes.
Icon Size: Adjusts the size of the icon.
Padding: Adds spacing inside the background shape.
Border Radius: Controls corner roundness (especially for squares or frames).
Rotate: Spins the icon by degrees (0–360°) for visual effects.
Hover Animation: Choose from animated effects like grow, shrink, bounce, pulse, rotate, and more.
5. Best Practices
Use default mode when minimal styling is needed.
Apply stacked or framed modes to draw attention or enhance visual separation.
Choose icons that are meaningful and intuitive for users.
Use hover animations sparingly to avoid overwhelming the user.
Ensure icons scale well across devices by adjusting responsive size and padding.
The Icon widget offers flexibility and creative styling options for visual enhancements throughout your site. It’s simple, powerful, and essential for adding graphical context without clutter.
