Found what you have been looking for?

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

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)

  • 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;
    }

  • 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 (((

      • 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;
        }

Leave a 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 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.