Social Icons

Dave17

I have the social icons block on my homage. See image below.

I added a "custom" link which displays and works fine. The icon for the custom link displays as a "chain link" icon. Again, see image.

Is there a way to change the "chain link" icon for the custom link to something of my own design?

Thanks,

Darter02

I too would like a fix for this. I added LinkedIn and want their image on the site.

Lemans

Following....

jwashburn

Something like this should work

.sm-page-widget-social-links-link yui3-u {
background-image: url("http://path_to_your_properly_sized_image.png");
}

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

The first piece targets the container where you want to put your new icon such as Linked IN. To make it look right it should be the same size as the icon you are replacing

The second piece tells the font icon to not display

Here is a screen shot from a test i whipped up

Lemans

No luck here and I followed this to the letter...
I'll keep following to see what turns up... I always appreciate peoples responses. Thanks!

Darter02

There are somethings I'll need to figure out before I can try this.

1. I've no clue what size I need.

2. I'll need to find the right logo that is in the same style the others are in.

3. I'll need to make sure it behaves like the others do. They all have an opacity layer. Also, how do I ensure the color is correct? Does the system in my customizer still control that, or do I need to create it from scratch? What if I change colors?

The easiest would be for SM to simply ADD this to the customizer that controls this. LinkedIn isn't exactly an obscure site...

jwashburn

Lemans wrote: »

No luck here and I followed this to the letter...
I'll keep following to see what turns up... I always appreciate peoples responses. Thanks!

Copy and paste the code you used in here please

Lemans

jwashburn wrote: »

Copy and paste the code you used in here please

.sm-page-widget-social-links-link yui3-u {
background-image: url("http://lemansstudios.smugmug.com/photos/i-XpMQqPb/0/M/i-XpMQqPb-M.png");
}

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


It wouldn't even turn off the generic icon... no idea why. It's not a big deal in the scheme of things, just a nitpick on my part is all.

jwashburn

Lemans wrote: »

.sm-page-widget-social-links-link yui3-u {
background-image: url("http://lemansstudios.smugmug.com/photos/i-XpMQqPb/0/M/i-XpMQqPb-M.png");
}

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


It wouldn't even turn off the generic icon... no idea why. It's not a big deal in the scheme of things, just a nitpick on my part is all.

I guess different themes have different CSS classes

Yours is

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