Icon

The Icon widget allows you to display icons in various styles on your web page.

Content Tab

Content

• Icon: Click on the icon box to open the icon library, where you can search for and select the icon you wish to use. You can choose from a variety of icons from libraries like Font Awesome or upload your own icons.
• Link: Enter a URL to make the icon clickable, directing users to the desired location when they click on the icon.

Settings

• Container: Enables a container that surrounds the icon
• Shape: Choose the shape that will surround the icon.
• Hover Effect: Select an effect that occurs when a user hovers over the icon, such as Grow, Shrink, Pulse, etc.

Style Tab

Icon

• Color Type: Select a color for the icon or choose a gradient if the icon supports it.
• Size: Adjust the size of the icon to fit your design.
• Rotate: Rotate the icon by degrees, allowing for angled presentations.
• Alignment: Choose the alignment of the icon within its column or section. Options include left, center, right, or justified.
• Padding: Set the padding around the icon to increase or decrease the space around it.

Container

• Background Type: Choose the type of background for the icon container, like a solid color or gradient.
• Border Type: Select a border style for the container, with options such as none, solid, dotted, dashed, etc.
• Border Radius: Define the border radius if you want rounded corners for the icon container.
• Box Shadow: Add a shadow effect to the container.

The Style tab also includes settings for the "Normal" and "Hover" states, allowing you to define different styles for when the mouse is over the icon.