Skip to main content

Are you still looking for something?

Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Try these: contact formbuttonbuy photos

Replace the Custom Link icon with your own

You can add a custom link to the SOCIAL LINKS content block, but once added the link displays a simple link icon.  Some customers would like to use it to display a different icon – for example LinkedIn or Yelp etc. There are two versions of the code – one is for the CIRCLE icons and the second one is for the SQUARE icons – choose code based on the icons shape that you are using.

Using this CSS code – you can make this possible:

CSS
/*--- replacing the default custom link icon with one of your owns CIRCLE ICONS ---*/
.sm-page-widget-social-links-link {
background-image: url("https://photos.smugmug.com/photos/i-5nL8PvP/0/O/i-5nL8PvP.png");
  background-repeat: no-repeat;
  height: 27px;
  width: 27px;
  background-size: 100%;
  margin-top: 4.5px;  
}

.sm-fonticon-LinkCircle:before {
display: none;
  height: 30px;
}
CSS

Remember to replace the ‘background-image’ link with a link to the icon of your choice.

CSS
/*— replacing the default custom link icon with one of your owns - SQUARE ICONS —*/
.sm-page-widget-social-links-link {
background-image: url("https://photos.smugmug.com/photos/i-5nL8PvP/0/O/i-5nL8PvP.png");
background-repeat: no-repeat;
height: 27px;
width: 27px;
background-size: 100%;
margin-top: 4.5px;
}

.sm-fonticon-Link:before {
display: none;
height: 30px;
}
CSS

Related articles

Comments (7)

Leave a Reply to Ilja Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Support me

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.