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.

Using this CSS code – you can make this possible:

/*--- 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-LinkCircle:before {
display: none;
  height: 30px;
}

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

css, icon, link


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Comments (2)

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

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.