Utilizing the Icon Widget

The Icon widget offers a selection of over 1000 ready-made icons or the option to upload your own SVG file. Customize icons by changing their color, hover effects, background, border, and more to enhance your site’s layout and highlight text.

Adding Icons #

1. Access the Widgets Panel:
   • Click on Widgets in the side panel.
2. Add the Widget:
   • Search for Icon and drag it to your desired location on the canvas.

Working with SVG Files #

• Scalability: SVG files can be resized without losing resolution.
• Code Impact: SVGs are image files with HTML code. Using multiple complex SVGs can slow your site’s loading time. If using many SVGs, consider converting some to regular image formats like .png or .jpeg to maintain performance.

Content Editor #

To customize your icon’s content:

1. Accessing the Content Editor:
   • Right-click the widget and select Edit Content.
2. Choose or Upload an Icon:
   • Click Choose Icon to select a ready-made icon, or Upload SVG File for your own design.
3. Link the Icon:
   • Click Link Icon to select the page the icon will link to.
4. Alt Text and Tooltips:
   • Enter Alt text to help search engines recognize the image content.
   • Type a Tooltip to display when users hover over the icon.

Design Editor #

To refine your icon’s design:

1. Accessing the Design Editor:
   • Right-click the element and select Edit Design.
2. Customizing Design:
   • Adjust the layout, size, color, and spacing of your icon.
3. Floating Widgets:
   • Enable the Floating toggle to make the icon a floating widget and select its position. To limit visibility to the current page, enable Show on this page only.

FAQs and Troubleshooting #

Why isn’t the icon’s color changing?

• The icon’s color must be true black (hex code #000000) and exported with inline style. For complex SVG adjustments, consider consulting someone experienced with SVGs.

By using the Icon widget effectively, you can add visual interest and functionality to your Turnkey Websites™ site, enhancing the overall user experience.

What's your Reaction?

You have reacted on"Utilizing the Icon Widget"


A few seconds ago