Custom icons make links easier to recognize and help maintain a consistent visual style across your site. For example, you can add a branded icon to a link that directs visitors to your company's website, social media profile, or another external resource.

To add a custom icon, you'll need:

A publicly accessible URL for the icon image.
Custom CSS added to your site or theme.
A hyperlink in the caption of the tile where you want the icon to appear.

This method uses CSS selectors to identify links based on their destination URLs and display the corresponding icon.

Step 1: Upload Your Custom Icon

Before adding the CSS, upload your icon to a location that provides a publicly accessible image URL.

For the best results, use an SVG or PNG image with a transparent background.

Open the file hosting tool available in the Zoomforth editor, if applicable.
Upload your custom icon.
Copy the URL generated for the uploaded file.
Keep the URL available for the next step.

Make sure the icon URL can be accessed publicly so visitors can see the image when they open your site.

Step 2: Add Custom CSS

You can add the CSS at the site level if you want the icon to appear on one site, or at the theme level if you want to reuse the styling across sites that use the same theme.

Follow the appropriate guide:

Copy the CSS below to add custom icons to your hypertexts

.link-icon a {
  margin-top: .6em!important;
  display: block;
}
.link-icon a:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  margin-right: .5em;
  margin-top: -.25em;
}
.link-icon-condensed a {
  margin-top: .6em!important;
  color: transparent!important;
  line-height: 0;
  width: 2em;
  height: 2em;
  display: inline-block;
  position: relative;
  text-align: center;
  margin-left: .25em!important;
  margin-right: .25em!important;
}
.link-icon-condensed a:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  vertical-align: middle;
}
.link-icon-condensed p {
  display: inline-block;
  padding-top: 0.6em;
}

/* Create your own */
.link-icon a[href*=" ADD SITE HERE "]:before,
.link-icon-condensed a[href*=" ADD SITE HERE "]:before {
background: url( ADD ICON URL HERE );
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

Replace the placeholders as follows:

ADD-SITE-HERE — Enter a unique part of the destination URL that identifies the link. For example, use zoomforth for a link to a Zoomforth website.
ADD-ICON-URL-HERE — Enter the publicly accessible URL of your uploaded icon.

For example, if your link directs visitors to Zoomforth and you want to display a custom branded icon, your CSS might look like this:

/* Custom Zoomforth icon */
.link-icon a[href*="zoomforth"]:before,
.link-icon-condensed a[href*="zoomforth"]:before {
  content: "";
  background: url("https://example.com/your-custom-icon.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Replace the example image URL with the actual URL of your icon.

The selector checks whether the hyperlink's destination URL contains the specified text. Both CSS classes are included so the custom icon can be used with either supported display style.

Step 3: Save Your CSS

Once you've added the code:

Review the CSS to make sure the destination text and icon URL are correct.
Click Save, Done, or Publish, depending on the editor you're using.
Confirm that your changes have been saved.

If you add the CSS to a theme, remember that theme-level styling may affect other sites that use the same theme.

Step 4: Apply a CSS Class to the Tile

Next, configure the tile that contains the hyperlink.

Open your site in the Zoomforth editor.
Select the tile containing the caption you want to customize.
In the left editing panel, locate CSS Classes.
Enter one of the following classes, depending on your preferred layout:
- link-icon — Displays the icon beside the link text.
- link-icon-condensed — Displays the icon without visible link text.
Apply the changes.

Choose link-icon if you want visitors to see a text label alongside the icon.

Choose link-icon-condensed if you prefer a more compact, icon-only layout.

Step 5: Add a Hyperlink to the Caption

The icon appears when the caption contains a hyperlink whose destination matches the text specified in your CSS selector.

Select the tile's caption.
Enter the link text you want to display, if applicable.
Open the caption's HTML code editor.
Wrap the text in an HTML anchor tag and specify the destination URL.

For example:

<a href="https://www.zoomforth.com">Visit Zoomforth</a>

Replace the example URL and link text with your own destination and label.

Save the caption and preview your site.
Verify that the correct custom icon appears and that the link opens the intended destination.

Step 6: Verify the Custom Icon

Preview the site to confirm that everything works as expected.

Check the following:

The icon appears beside the link text or by itself, depending on the CSS class you selected.
The icon displays correctly without distortion.
The hyperlink opens the correct destination.
The icon remains visible on different screen sizes.

If you want to use different icons for different destinations, repeat the process with a separate CSS selector and icon URL for each destination.

Need Help?

Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.

Add custom icons to hypertexts