Because of the wide reach of the various social networks, your content is likely to earn an instant audience engagement by simply using the icons of familiar social media, seeing that your brand is in the same channel they maybe connected with.
Any icons, like those ones from the popular social networks today, can be easily added into the caption of your content, using the CSS class, found at the bottom of this article.
You will notice from the CSS code we prepared the custom icons are publicly hosted. You can see this article to use our native file hosting utility to upload the icon you want to use in your caption.
To add custom icon to the captions:
Add your preferred CSS class to the site or theme editor. You may refer to the articles below for more details about this process.
Replace the ADD SITE HERE placeholders in the CSS code with the target domain name associated with icon to be used. In the video, the placeholders were replaced with the name zoomforth, as shown below:
/* Create your own */
.link-icon a[href*="zoomforth"]:before,
.link-icon-condensed a[href*="zoomforth"]:before {
background: url( ADD ICON URL HERE );
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Replace the ADD ICON URL HERE placeholder with the URL of the custom icon. In the video, the custom icon was uploaded via our public hosting utility which generates the icon URL. The CSS code then becomes:
/* Create your own */
.link-icon a[href*="zoomforth"]:before,
.link-icon-condensed a[href*="zoomforth"]:before {
background: url(https://d1ih3jzbl9wgdj.cloudfront.net/hosted/426/public_uploads/05512152-55ca-4cd8-b469-c302c39568e7.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Click on Save then Done or Publish buttons to save the custom CSS, depending on which editing interface you are.
Click the target captioned tile to add the social icon for.
On the left editing pane, under CSS Classes, add your preferred CSS class.
If you are to use the what we prepared below, depending on your design preference, you can add any one of the CSS classes below:link-icon - shows text beside the icon
link-icon-condensed - shows the icon only
Click on the caption of the tile to add the text for the social link, if preferred.
Use the HTML code editor to create an anchor out of the text you added in the previous step.
You may refer to this article about creating anchors within captions.
You can use the custom CSS below to add custom icons to your caption hypertexts:
/* 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;
}