Social icons can be added next to the hypertexts in your tile captions, via CSS classes, to support engagement for, or aesthetics of, your site. You can use your preferred CSS class to accomplish that, or the custom CSS we prepared for you, found at the bottom of this article.
To add social icons next to the hypertexts in your tile 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.
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 social icons to your caption 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;
}
.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;
}
/* 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;
}