Add Icons to Widget Area

Icons are useful for using scalable images for links, instead of text. Our theme implements Ion-Icons, built by the Ionic Team. View their documentation at https://ionicons.com/ for reference of different icons.

Navigate to your site’s customizer menu, and select widgets:

For this example, I want to add a shopping cart icon to the top-right menu (header social icons for Hallie Pro).

We will be adding a custom HTML widget, for us to implement the icon and links easily.

In this example, I will be using the following code:

<a href="/cart">
<i style="font-size: 24px;" class="icon ion-ios-cart"></i>
</a>

Allow me to break down this code for you:

  • <a> is a link tag. href signifies the end point you want this to link this tag to. For example, we want our “cart” page to display, so we assign href as href=”/cart”.
  • The <i> tag goes in-between the <a> opening and closing tags, and tells the code to use an icon. Style refers to custom CSS qualities that we want to add to this icon. You can resize this icon by factors of 8 pixels at a time (8px, 16px, 24px, 32px, etc.).
    • Class is important in this case, because it assigns a specific icon to this icon tag. Reference the Ionic Icon documentation previously listed for specific icon use.
    • Close out your icon tag with a </i> after you complete your <i> tag.
  • Make sure to close out the <a> tag with a closing </a> tag, or else it may cause issues within your website.

Publish your changes when you are satisfied.

Now, if you click on your newly added icon, it will redirect you to your programmed page.

Congratulations on your awesome new site feature.

Was this article helpful to you? Yes No

How can we help?