You can customize hyperlinks in tile captions to display icons for social media platforms and other destinations. This is useful when you want to make links more recognizable, improve the visual presentation of your site, or provide visitors with quick access to external profiles.

Zoomforth supports this customization through CSS classes and custom CSS.

There are two display options:

link-icon — Displays an icon beside the link text.
link-icon-condensed — Displays the icon without visible link text.

To add social icons in your text tile or overlay caption

Step 1: Add the Custom CSS

First, add the CSS that controls how the icons appear on your site.

Open your site in the Zoomforth editor.
Add the custom CSS to either the site editor or the theme editor.
Copy the CSS below into the appropriate CSS editor.
Save your changes. Depending on the editor, you may need to click Save, Done, or Publish.

For more information, see:

Custom CSS

The following CSS includes styling for link spacing and icons for Google Maps, Facebook, LinkedIn, Twitter, and email links.

.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;
}

.link-icon a[href*="maps"]:before,
.link-icon-condensed a[href*="maps"]:before {
  background: url(https://d1ih3jzbl9wgdj.cloudfront.net/hosted/425/public_uploads/363ecdc6-4d61-49d5-84e9-8584b660bde3.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.link-icon a[href*="facebook"]:before,
.link-icon-condensed a[href*="facebook"]:before {
  background: url(https://d1ih3jzbl9wgdj.cloudfront.net/hosted/425/public_uploads/94fd5484-aff5-47a7-afde-b55793e0ad57.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.link-icon a[href*="linkedin"]:before,
.link-icon-condensed a[href*="linkedin"]:before {
  background: url(https://d1ih3jzbl9wgdj.cloudfront.net/hosted/425/public_uploads/c79b2736-6643-4e60-b223-85a4c739d99b.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.link-icon a[href*="twitter"]:before,
.link-icon-condensed a[href*="twitter"]:before {
  background: url(https://d1ih3jzbl9wgdj.cloudfront.net/hosted/425/public_uploads/c48f8f30-a37a-418b-b4dc-1d4dd0c084e8.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.link-icon a[href*="mailto:"]:before,
.link-icon-condensed a[href*="mailto:"]:before {
  background: url(https://d1ih3jzbl9wgdj.cloudfront.net/hosted/425/public_uploads/c8b75e5d-ea66-46ae-9e53-2d7ad3a25d4c.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Note: These styles apply to links whose URLs contain the matching text. For example, a URL containing facebook will use the Facebook icon. The CSS selectors and image URLs must match the destinations and icons you want to display.

Step 2: Add a CSS Class to the Tile

After adding the CSS, choose how the icon should appear.

In the site 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:
- link-icon to display the icon beside the link text.
- link-icon-condensed to display the icon without visible link text.
Apply the changes.

Choose the class that best fits your site's design and layout.

Step 3: Add a Hyperlink to the Caption

The icon appears when the caption contains a hyperlink with a URL that matches one of the CSS selectors.

Select the tile and open its caption editor.
Enter the text you want to use for the link, such as Facebook, LinkedIn, or Contact Us.
Open the caption's HTML code editor.
Wrap the link text in an HTML anchor tag and enter the destination URL.
Save your changes and preview the site.

For more information, see Create Hypertext in Tile Captions.

Need Help?

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

Add social icons to hypertexts