How to link icon to box to another page without button in wordpress

 To link an icon to another page in WordPress without using a button, you can follow these steps. The approach will vary depending on whether you are using the Block Editor (Gutenberg), the Classic Editor, or a page builder plugin like Elementor or WPBakery.

Using the Block Editor (Gutenberg)

1. Add an Icon Block:

   • Go to the WordPress editor for the page or post where you want to add the icon.
   • Click on the + button to add a new block.
   • Search for "Icon" or "Custom HTML" and select it. If using an icon plugin or theme, you might have specific icon blocks.

2. Insert the Icon:

   • If you chose the "Icon" block, you can select your desired icon from the available options.
   • If using "Custom HTML," you can insert an <svg> or an icon from an icon font (e.g., FontAwesome).

3. Make the Icon a Link:

   • Highlight the icon or the surrounding block if it supports linking.

   • In the block settings on the right-hand side, there should be an option to add a URL in the "Link" field. Enter the URL of the page you want to link to.

   • If using "Custom HTML," wrap your icon code with an anchor tag:

   • <a href="https://example.com"> <!-- Example of an SVG icon --> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 19l-7-7 7-7"></path> </svg> </a>

   • Publish or Update:

     • Once you’re satisfied, click “Publish” or “Update” to save your changes.

     • Using the Classic Editor

       1. Add the Icon Code:

          • Switch to the “Text” editor mode.
          • Insert the HTML code for your icon where you want it on the page.

       2. Wrap the Icon in a Link:

          • Wrap the icon code with an <a> tag:

          • <a href="https://example.com"> <!-- Example of an SVG icon --> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 19l-7-7 7-7"></path> </svg> </a>

          • 1. Update the Page:

               • Click “Update” or “Publish” to save the changes.

            Using a Page Builder (Elementor, WPBakery, etc.)

            1. Add an Icon Widget:

               • Open the page with the page builder.
               • Drag and drop an icon widget (such as "Icon" in Elementor) onto your page.

            2. Configure the Icon:

               • Select your icon from the widget’s options.
               • In the widget’s settings, there will typically be a field for the URL or link. Enter the URL of the page you want to link to.

            3. Customize and Save:

               • Adjust the styling as needed.
               • Save or update the page to apply your changes.

            Additional Tips

            • Accessibility: Ensure the icon is accessible. Consider adding an aria-label or using accessible icon sets.
            • Responsive Design: Ensure the icon displays well on different devices. Adjust sizes and spacing as needed.
            • Testing: Preview your changes to make sure the icon links correctly to the intended page.

            By following these steps, you can effectively link an icon to another page in WordPress without needing to use a button.