How to Use Official Social Network Icons?

English Spreadshop
#1

Hello, can I change the social media icons to be their official color? Or can I upload images in place of the icons?

Also, how can I change the size of the icons? Since Twitter’s terms are that the Twitter logo must be a minimum of 32 pixels when the Twitter icon on my SpreadShop is like 17x14 pixels? Twitter also, used to say that their logo may never be black. I couldn’t find that reference anymore though.

I’m sure the other social media websites have requirements on their icons as well.

#2

dashboard > Shop Settings > Advanced > HTML & CSS
try this css

#sprd-social-facebook {
fill: #4267B2;
}
#sprd-social-twitter{
fill: #1DA1F2;
}

1 Like
#3

I strongly believe that such design regulations are meant to be for B2B communications, like mentioning any of the companies in a business related context, in marketing and brand communication.

All of these platforms are depending on fresh traffic that is coming from the outside or shares.
Therefore I believe they are more concerned about the number of shares and backlinks as the icon color of the link.

#4

Well, it’s up to you how you define Twitter Guidelines on their own logo. But, when it says
“To ensure the logo maintains its
visual impact, do not go any smaller
than 16 pixels wide.” (min 32px for icons)
and
“… never show the Twitter logo in
black or any other colors.”
It doesn’t say “These guidelines are only for B2B communications”. But I want to consciously follow all social network guidelines on their logos.

#5

Thanks! These seem to work! But, how do I change the size? I tried using the:
width: 1.6em;
height:1.6em;
But that didn’t seem to work.

#6

It will be something like this

.sprd-social-bar__link{
max-width: 2em !important;
max-height: 2em !important;
}
.sprd-social-bar__icon{
width: 2em !important;
height: 2em !important;
}
play with the values

#7

Thank you! That worked!

#8