Social Media Icons: Can we change them, and how?

Andrew101 · January 16

Hi Kids. Quick Q for y'alls: Can I change the icons in use for the social media? I hate 'Twitter' so I use Bluesky but want to have their icon, not just the default one.
Thank you all for your help, y'all are the real MVPs!

justin.mabee · January 17

Hey Andrew! This is easy with a bit of custom code. I've included a couple screenshots and the code I used here.

What you would do is put the social links that you want in, and then navigate to Website Tools, then Custom CSS. From there, upload the files of the logo you want to use (in this case, the bluesky logo you want to use) in the color you want. Then, add this code, and notice that it says nth-of-type(3). That means it's the 3rd social link. So wherever you want the link, put it there in the order you want it. If you want it to be the first one, it would be nth-of-type(1). They just need to match in the social icons links area.

Once you have the code in there, copy and paste the URL of the image you just uploaded to Custom CSS, and put it between the parentheses under background-image: url(_).

Hope this helps!

//Custom Social Icons//
 .sqs-svg-icon--list a:nth-of-type(3) {
    svg {
      display:none;
    }    
    background-image: url();    
    background-size: 100%;    
    background-repeat: no-repeat;  
  }

Edited January 17 by justin.mabee
adding screenshots

Andrew101 · January 18

5 hours ago, justin.mabee said:
Hey Andrew! This is easy with a bit of custom code. I've included a couple screenshots and the code I used here.

What you would do is put the social links that you want in, and then navigate to Website Tools, then Custom CSS. From there, upload the files of the logo you want to use (in this case, the bluesky logo you want to use) in the color you want. Then, add this code, and notice that it says nth-of-type(3). That means it's the 3rd social link. So wherever you want the link, put it there in the order you want it. If you want it to be the first one, it would be nth-of-type(1). They just need to match in the social icons links area.

Once you have the code in there, copy and paste the URL of the image you just uploaded to Custom CSS, and put it between the parentheses under background-image: url(_).

Hope this helps!
//Custom Social Icons//
 .sqs-svg-icon--list a:nth-of-type(3) {
    svg {
      display:none;
    }    
    background-image: url();    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 

Hey Justin! Thanks for that. The Code that did work for me was:

.header-actions-action--social a:nth-of-type(1) {

svg {

display:none;

}

background-image: url(https://static1.squarespace.com/.../bluesky-social-logo...);

background-size: 100%;

background-repeat: no-repeat;

}
But it didn't work on mobile, so I added this:

@media screen and (max-width: 640px) {

.header-actions-action--social a:nth-of-type(1) {

/* Your mobile-specific styles here */

background-image: url(https://static1.squarespace.com/.../bluesky-social-logo...);

background-size: 100%;

background-repeat: no-repeat;

}

}
But that didn't work. Thoughts?
Thank you!

justin.mabee · January 18

You shouldn't have to do anything for mobile, it should just work with the original code. What happened on mobile?

Andrew101 · January 18

6 hours ago, justin.mabee said:

You shouldn't have to do anything for mobile, it should just work with the original code. What happened on mobile?

Not sure to be honest but found the correct code and it's all good now.
Thanks for helping out, I appreciate it!

nickfish · February 16

Hey Andrew,

I'm running into the same issue.

The code you pasted above using

.header-actions-action--social a:nth-of-type(1)

rather than Justin's

.sqs-svg-icon--list a:nth-of-type(1)

also worked for me on desktop but not on mobile.

What was the code you used to change it on mobile? Thanks!

tuanphan · February 17

14 hours ago, nickfish said:
Hey Andrew,

I'm running into the same issue.

The code you pasted above using
.header-actions-action--social a:nth-of-type(1)
rather than Justin's
.sqs-svg-icon--list a:nth-of-type(1)
also worked for me on desktop but not on mobile.

What was the code you used to change it on mobile? Thanks!

If you share link to your site, we can check problem easier

Andrew101 · February 29

On 2/16/2024 at 11:37 AM, nickfish said:
Hey Andrew,

I'm running into the same issue.

The code you pasted above using
.header-actions-action--social a:nth-of-type(1)
rather than Justin's
.sqs-svg-icon--list a:nth-of-type(1)
also worked for me on desktop but not on mobile.

What was the code you used to change it on mobile? Thanks!

Sorry for the late response, I just saw this. I actually cleaned it up myself. Here's what I use in my header and footer. The header has some code to animate it on hover.

/* General Styles and Fonts */
@font-face {
font-family: 'bardamu';
src: url('https://static1.squarespace.com/static/5ea09fdeda648813f7c13c91/t/6524985acca51321b283614d/1696897114218/Bardamu+Regular.otf');
}

:root {
--color1: #FFFFFF;
--color2: #D3B575;
--color3: #E82B02;
--color4: #373838;
--color5: #000000;
--background-gradient: linear-gradient(99deg, #F1F1EF, #C87B28, #32273B);
--transition-fast: 0.2s ease-in;
--transition-normal: 0.3s ease-in-out;
}

body, h4, .sqs-block-button-element, .sqs-announcement-bar-url a {
font-family: 'bardamu', sans-serif;
}

html {
scroll-behavior: smooth;
}

.anchor-link {
scroll-margin-top: 150px;
}

.background-pause-button {
display: none;
}

/* Header Styles */
.header-actions .btn, .header-menu .header-menu-cta a {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border: 1px solid #eee;
background-color: #f0f0f0;
color: #333;
transition: all var(--transition-normal);
}

.header-actions .btn:hover, .header-menu .header-menu-cta:active a {
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
transform: translateY(4px);
opacity: 0.9;
}

/* Header Navigation Animated Underline */
.header-nav-item a {
position: relative;
overflow: hidden;
display: inline-block;
}

.header-nav-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--color2);
transition: width 0.3s ease, left 0.3s ease;
}

.header-nav-item a:hover::after, .header-nav-item a:focus::after {
width: 100%;
left: 0;
}

/* Custom Social Media Icons - Header */
.header-actions-action--social .icon--fill:nth-of-type(1),
.header-menu-actions-action:nth-of-type(1) {
svg { display: none; }
background-size: 100%;
background-repeat: no-repeat;
}

.header-actions-action--social .icon--fill:nth-of-type(1) {
background-image: url('https://static1.squarespace.com/static/5ea09fdeda648813f7c13c91/t/65dd832df0c37548de5677d9/1709015854088/bluesky-social-logo-06243b-seeklogo.com.png');
}

.header-menu-actions-action:nth-of-type(1) {
background-image: url('https://static1.squarespace.com/static/5ea09fdeda648813f7c13c91/t/65a8afc94770023a04db85b6/1705553865937/bluesky-social-logo-Mobile.png');
}

/* Social Media Icons Interaction */
.header-actions-action--social a,
.social-icon {
transition: transform 0.3s ease, color 0.3s ease;
display: inline-block;
}

.header-actions-action--social a:hover,
.social-icon:hover {
transform: scale(1.69);
color: var(--color2);
}

.header-actions-action--social a:active,
.social-icon:active {
transform: scale(0.9);
}

/* Announcement Bar */
[data-header-theme] .sqs-announcement-bar-dropzone .sqs-announcement-bar {
background: var(--background-gradient);
background-size: 400% 400%;
animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
0%, 100% { background-position: 0% 49%; }
50% { background-position: 100% 52%; }
}

/* Button Styles */
.sqs-block-button-element {
box-shadow: 3px 3px var(--color4);
border: 1px solid var(--color4);
transition: all var(--transition-fast);
}

.sqs-block-button-element:hover {
box-shadow: none;
transform: translateY(5px);
opacity: 1;
}

/* Section-Specific Styles */
/* Home Section */
#block-1e4e511b4d319bbd6b7c {
background-color: rgba(220, 220, 220, 0.2);
border-radius: 8px;
display: inline-block;
padding: 5px;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}

/* Blog Section */
section[data-section-id="652450d5d7113143d7599d1f"] img {
border-radius: 25px;
}

/* Footer Styles */
footer .sqs-block-html a,
footer .image-title-wrapper a,
footer .image-subtitle-wrapper a,
footer .sqs-image-caption a,
footer .image-caption a,
footer .sqs-block-newsletter a,
footer .list-item-content__description a,
footer .list-section-title a,
footer .header .header-nav-wrapper a {
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
transition: all var(--transition-fast);
}

/* Mobile Optimization */
@media screen and (max-width: 640px) {
footer * {
text-align: left;
}
}

/* Custom Scrollable Image Blocks */
#block-yui_3_17_2_1_1694302902520_3794,
#block-yui_3_17_2_1_1694300586988_2013,
#block-yui_3_17_2_1_1694301909911_2159 {
height: 600px;
overflow-y: scroll;
}

/* Additional Styles As Needed */

/* Hide Specific Collections or Sections */
#collection-5ea0f0db980ab54fa3b1474c header,
section[data-section-id="63b7505de499f6d4f4a03996"] footer {
display: none;
}

/* Footer Custom Social Media Icon */
.sqs-svg-icon--list a:nth-of-type(1) {
svg { display: none; }
background-image: url('https://static1.squarespace.com/static/5ea09fdeda648813f7c13c91/t/65a8afc94770023a04db85b6/1705553865937/bluesky-social-logo-Mobile.png');
background-size: 100%;
background-repeat: no-repeat;
}

/* Footer Custom Social Media Icon */
.sqs-svg-icon--list a:nth-of-type(1) {
svg { display: none; }
background-image: url('https://static1.squarespace.com/static/5ea09fdeda648813f7c13c91/t/65a8afc94770023a04db85b6/1705553865937/bluesky-social-logo-Mobile.png');
background-size: 100%;
background-repeat: no-repeat;
}

louisecrowleylibrary · March 10

On 1/17/2024 at 1:04 PM, justin.mabee said:
Hey Andrew! This is easy with a bit of custom code. I've included a couple screenshots and the code I used here.

What you would do is put the social links that you want in, and then navigate to Website Tools, then Custom CSS. From there, upload the files of the logo you want to use (in this case, the bluesky logo you want to use) in the color you want. Then, add this code, and notice that it says nth-of-type(3). That means it's the 3rd social link. So wherever you want the link, put it there in the order you want it. If you want it to be the first one, it would be nth-of-type(1). They just need to match in the social icons links area.

Once you have the code in there, copy and paste the URL of the image you just uploaded to Custom CSS, and put it between the parentheses under background-image: url(_).

Hope this helps!
//Custom Social Icons//
 .sqs-svg-icon--list a:nth-of-type(3) {
    svg {
      display:none;
    }    
    background-image: url();    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 

Hey Justin, did you wind up with a fix for the mobile problem that's shorter than the last message Andrew101 posted? Caveat: I'm not really a coder, so am always looking for the simplest way to do these things...

tuanphan · March 11

7 hours ago, louisecrowleylibrary said:

Hey Justin, did you wind up with a fix for the mobile problem that's shorter than the last message Andrew101 posted? Caveat: I'm not really a coder, so am always looking for the simplest way to do these things...

You can share link to your site, we can adjust code for your case easier

louisecrowleylibrary · March 11

14 minutes ago, tuanphan said:

You can share link to your site, we can adjust code for your case easier

Here ya go tuanphan: https://www.louisecrowleylibrary.org/

tuanphan · March 12

On 3/11/2024 at 8:26 AM, louisecrowleylibrary said:

Here ya go tuanphan: https://www.louisecrowleylibrary.org/

You can use CSS code like this to Website > Website Tools > Custom CSS. Replace Pixabay with your icon url

header#header a.icon[href*="sometimesantisocial.media"] svg {
    visibility: hidden;
}
header#header a.icon[href*="sometimesantisocial.media"] {
    background-image: url(https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

header#header a.icon[href*="bsky.app"] svg {
    visibility: hidden;
}
header#header a.icon[href*="bsky.app"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/25/19/58/piran-8275931_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

louisecrowleylibrary · March 12

3 hours ago, tuanphan said:

You can use CSS code like this to Website > Website Tools > Custom CSS. Replace Pixabay with your icon url

header#header a.icon[href*="sometimesantisocial.media"] svg {
    visibility: hidden;
}
header#header a.icon[href*="sometimesantisocial.media"] {
    background-image: url(https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

header#header a.icon[href*="bsky.app"] svg {
    visibility: hidden;
}
header#header a.icon[href*="bsky.app"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/25/19/58/piran-8275931_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Ah that's great. Do the icons need to be white with transparent background?

tuanphan · March 13

15 hours ago, louisecrowleylibrary said:

Ah that's great. Do the icons need to be white with transparent background?

Yes. White with transparent background.

On Other pages, if you need to change these icons color, I will give extra code

louisecrowleylibrary · March 14

On 3/12/2024 at 6:12 AM, tuanphan said:

You can use CSS code like this to Website > Website Tools > Custom CSS. Replace Pixabay with your icon url

header#header a.icon[href*="sometimesantisocial.media"] svg {
    visibility: hidden;
}
header#header a.icon[href*="sometimesantisocial.media"] {
    background-image: url(https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

header#header a.icon[href*="bsky.app"] svg {
    visibility: hidden;
}
header#header a.icon[href*="bsky.app"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/25/19/58/piran-8275931_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

This worked great! Though I ran into the same problem that others did, in that it worked in the header, but not in the footer. Would it make sense to just repeat the code, but replace the instances of "header" with "footer"?

Jen-X · March 14

I've applied @justin.mabee solution to this website and it works perfectly! Thanks Justin!

https://headpiece.com/

That said, this is a 7.0 Hayden template (it's been ages since I've done anything in 7.0, so forgive me for my ignorance) and when I hover over the social icons in the footer, FB and IG icons that are not selected fade out on hover. Is there a way to apply this affect to the custom social icon I added for "The Knot?"

Edited March 15 by Jen-X

tuanphan · March 16

On 3/14/2024 at 10:58 PM, louisecrowleylibrary said:

This worked great! Though I ran into the same problem that others did, in that it worked in the header, but not in the footer. Would it make sense to just repeat the code, but replace the instances of "header" with "footer"?

With Footer, use this code

footer.sections a.sqs-svg-icon--wrapper[href*="sometimesantisocial.media"] svg {
    visibility: hidden;
}
footer.sections a.sqs-svg-icon--wrapper[href*="sometimesantisocial.media"] {
    background-image: url(https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

footer.sections a.sqs-svg-icon--wrapper[href*="bsky.app"] svg {
    visibility: hidden;
}
footer.sections a.sqs-svg-icon--wrapper[href*="bsky.app"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/25/19/58/piran-8275931_1280.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Jen-X · March 20

Is there a way to eliminate the hover effect? It's not being applied to my custom social link icon and I would just as soon eliminate the hover effect completely. Thanks in advance!

tuanphan · March 21

12 hours ago, Jen-X said:

Is there a way to eliminate the hover effect? It's not being applied to my custom social link icon and I would just as soon eliminate the hover effect completely. Thanks in advance!

When hover, with other items, it will change color, but because you used an image, so you can use this new code to change to another image for hover

.social-icons-color-white.social-icons-style-solid .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper.url {
    background-image: url(https://cdn.pixabay.com/photo/2023/11/07/22/56/skyscraper-8373617_1280.jpg) !important;
}

Replace Pixabay with your hover icon url

Jen-X · March 21

Thank you, this works, but I only want the hover effect when the cursor is hovering over one of the other icons. When it is hovering over this icon, I'd like the icon to appear white/normal. Is this possible? Thanks in advance.

tuanphan · March 24

On 3/21/2024 at 6:59 PM, Jen-X said:

Thank you, this works, but I only want the hover effect when the cursor is hovering over one of the other icons. When it is hovering over this icon, I'd like the icon to appear white/normal. Is this possible? Thanks in advance.

Use this CSS code

.social-icons-color-white.social-icons-style-solid .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper.url {
    background-image: url(https://cdn.pixabay.com/photo/2023/11/07/22/56/skyscraper-8373617_1280.jpg) !important;
}
.social-icons-color-white.social-icons-style-solid .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper.url:hover {
    background-image: url(https://static1.squarespace.com/static/57052c4d07eaa06209c3c966/t/65f32c2d396e431819e8f108/1710435373158/The+Knot.png) !important;
}

Jen-X · March 24

Perfect...thank you so much! 🙏

Social Media Icons: Can we change them, and how?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

justin.mabee

justin.mabee

Andrew101

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources