Hey, I wanted to remove the visible text/links for my social media links on listings and replace them with just the icons.
I successfully did so but then realised the icons themselves don’t contain the value links, is there a [gd_post_meta] or something I can output to wrap the icons in links?
Below I’ve attached screenshots as well as the CSS used (not yet shortened) and shortcode used. (The CSS contains tooltips)
My aim is to have it looking exactly like this, but wrap the “Visit our links” icons in the links.
Cheers,
Mark
<span style="font-weight:bold;color:#0f0f0f;">Visit our links</span>[gd_post_meta key="website" show="icon"][gd_post_meta key="facebook" show="icon"][gd_post_meta key="twitter" show="icon"][gd_post_meta key="instagram" show="icon"][gd_post_meta key="linkedin" show="icon"]
.geodir_post_meta.geodir-field-website, .geodir_post_meta.geodir-field-facebook, .geodir_post_meta.geodir-field-twitter, .geodir_post_meta.geodir-field-instagram,.geodir_post_meta.geodir-field-linkedin{float:left;color:#1675a9;cursor:pointer;font-size:22px;margin-bottom:20px;}
.geodir_post_meta.geodir-field-website:hover:after {content:"Website";color:white;font-size:18px;display:block;position:absolute;background:#1675a9;padding:2px 6px;border-radius:0px 8px;}
.geodir_post_meta.geodir-field-facebook:hover:after {content:"Facebook";color:white;font-size:18px;display:block;position:absolute;background:#1675a9;padding:2px 6px;border-radius:0px 8px;}
.geodir_post_meta.geodir-field-twitter:hover:after {content:"Twitter";color:white;font-size:18px;display:block;position:absolute;background:#1675a9;padding:2px 6px;border-radius:0px 8px;}
.geodir_post_meta.geodir-field-instagram:hover:after {content:"Instagram";color:white;font-size:18px;display:block;position:absolute;background:#1675a9;padding:2px 6px;border-radius:0px 8px;}
.geodir_post_meta.geodir-field-linkedin:hover:after {content:"LinkedIn";color:white;font-size:18px;display:block;position:absolute;background:#1675a9;padding:2px 6px;border-radius:0px 8px;}