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:
/*--- 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;
}Remember to replace the ‘background-image’ link with a link to the icon of your choice.
/*— 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;
}Comments (7)
Leave a Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Support this PORTAL
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.
Hi Tomasz!
Getting up to speed with smugmug and css code and already used a bunch of your tips, so big thanks in advanced from Barcelona! 🙂
However, I’m getting stuck with this social media icon customization. I have 2 instagram accounts and want 2 instagram icons in the social media block. I use the default icon for one of the accounts and would like to use the Link icon for the second account, replacing the link icon for another instagram icon.
I’m pasting the code in the CSS block I hava in the “entire site” (but didn’t work either by placing it in the Theme’s Advanced CSS section. I also found another code very similar to yours, but didn’t work either.
All I get is removing the link icon (blank space), but never being replaced by the new instagram icon
This is the code
/*— replacing the default custom link icon with one of your owns —*/
.sm-page-widget-social-links-link .sm-official .sm-fonticon {
background-image: url(“Icon URL uploaded to my smugmug”);
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
padding-right: -5px !important;
margin-right: -5px !important;
}
.sm-fonticon-LinkSquare:before {
display: none;
}
sm-fonticon-Link:before {
display: none;
}
.sm-user-ui .sm-page-widget-social-links-link .sm-official .sm-fonticon:before {
display: none;
}
I don’t see a link to your custom icon. Can you share it as well? Can you also provide a link to your website?
Hi!
This method does not replace the icon ((( Yes, my custom icin is displayed, but the old link icon (“chain”) is still seen above my custom (((
Ilja can you send me a link to your SmugMug website, where you have added the code? I will check it for you.
https://automotovelophoto.smugmug.com/
Your code is fully copy-pasted, with your icon (to be sure the proble is not with my icon file)
You are using square icons – which is why the second part of the code did not work.
Please use this code instead:
/*— replacing the default custom link icon with one of your owns —*/
.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;
}
Tnx a lot! Yes, now see the difference in the code.