Custom social icon disappeared

ziggykziggyk Registered Users Posts: 5 Beginner grinner
Hi there,

So a couple of weeks ago I've added this code on my CSS Content block to add a custom social icon, as I really disliked the default link icon.

/* Custom Links Custom */

.sm-page-widget-social-links-link .sm-official .sm-fonticon
{
background-image: url("imageURL");
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
}

.sm-fonticon-LinkSquare:before {
display: none;
}

Everything was working fine until couple of days ago when I checked my site again and the icon just vanished. I'm guessing something was changed in the original smugMug css code.
Is there a fix for that? I've had LinkedIn icon which is pretty important to me.

Also is it possible to have multiple custom social icons? One is just very limiting.

Thanks

Comments

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    If you could share a link to your site it'll help us clear this up for ya!

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • ziggykziggyk Registered Users Posts: 5 Beginner grinner
    edited January 31, 2017
    > @leftquark said:
    > If you could share a link to your site it'll help us clear this up for ya!

    Sure, zygimantaskucas.com

    (It didn't let me post a proper link as I'm new to the forum)
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 4, 2018

    It looks like your LinkedIn icon is still working. Let me know if you need any additional help

    For reference, you can also use our own LinkedIn icons, which are still active, just not used in the social icons. Instead of the code you've used above, you should just be able to use:

    For the Regular LinkedIn icon:
    /* Change the custom link icon to the Regular LinkedIn */ .sm-fonticon-Link:before { content: '\E269' !important; }

    For Circular LinkedIn icon:
    /* Change the custom link icon to the circular LinkedIn */ .sm-fonticon-LinkCircle:before { content: '\E268' !important; }

    For Square LinkedIn icon:
    /* Change the custom link icon to the square LinkedIn */ .sm-fonticon-LinkSquare:before { content: '\E267' !important; }

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    For some reason when we upgraded dgrin, the code didn't come over very well. Here's a re-post.
    /* Change the custom link icon to the Regular LinkedIn */
    .sm-fonticon-Link:before {
      content: '\E269' !important;
    }
    


    For Circular LinkedIn icon:
    /* Change the custom link icon to the circular LinkedIn */
    .sm-fonticon-LinkCircle:before {
      content: '\E268' !important;
    }
    


    For Square LinkedIn icon:
    /* Change the custom link icon to the square LinkedIn */
    .sm-fonticon-LinkSquare:before {
      content: '\E267' !important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.