Add custom social icon instead of generic link for Bandcamp and Mixcloud

Site URL: http://www.willkonitzer.com

Hi, I've added some social media icons for my site, but Bandcamp and Mixcloud aren't included with the standard Squarespace stylesheets. I'm hoping someone knows how I could replace the link icon that is currently there with the icons for Bandcamp and Mixcloud from font awesome.

I'm trying to use this custom css
 

@media only screen and (min-width:640px) {  .icon--fill:nth-of-type(4) { svg { display:none; }  background-image: url(IMAGEURL);  background-size: 100%;  background-repeat: no-repeat;  }  }  .header-menu-actions-action:nth-of-type(4) {  svg {  display:none;  }  background-image: url(IMAGEURL);  background-size: 100%;  background-repeat: no-repeat;  }

but I'm not sure how to incorporate the font awesome CSS. 

<i class="fab fa-mixcloud"></i>

I should have the font awesome style sheet loaded, and I'm sure his is fairly simple if you know how!

Any help much appreciated.

@bangank36 This is awesome - exactly what I needed. One thing I noticed was on the mobile view the replacement icons are slightly out of alignment with the rest. If you have an idea how to correct that, that would be amazing, but if not, no problem - I appreciate the assistance.

-Will

5 minutes ago, wkonitzer said:

@bangank36 This is awesome - exactly what I needed. One thing I noticed was on the mobile view the replacement icons are slightly out of alignment with the rest. If you have an idea how to correct that, that would be amazing, but if not, no problem - I appreciate the assistance.

 

-Will

try update the icon

.header .icon {
    font-family: "Font Awesome 5 Brands";
    display: flex;
    align-content: center;
    align-items: center;
}

Thanks - that nailed it 🙂

Hi, I am having the same problem trying to use a Bandcamp icon in the header but the code didn't work for me. Instead the icon changed to an empty square. Am I missing something? I would also like for the icon to appear in the footer too. #cssnewbie

On 8/6/2021 at 9:44 PM, selkiemusic said:

Hi, I am having the same problem trying to use a Bandcamp icon in the header but the code didn't work for me. Instead the icon changed to an empty square. Am I missing something? I would also like for the icon to appear in the footer too. #cssnewbie

Hi. What is your site url? We can check easier

Thank you! http://selkiemusic.com

On 8/9/2021 at 4:04 AM, selkiemusic said:

 

Thank you! http://selkiemusic.com

Hi. Where is icon? I don't see it on header/footer

Hi. I'm having a similar issue, trying to add a Bandcamp icon. This is my page:

https://thesevenups.com.au/

There is currently a small square where the icon should be.

Any help is much appreciated. Thank you!

On 11/7/2022 at 7:56 PM, TSU said:

Hi. I'm having a similar issue, trying to add a Bandcamp icon. This is my page:

https://thesevenups.com.au/

There is currently a small square where the icon should be.

Any help is much appreciated. Thank you!

To use above code, you need to add FontAwesome Library Link to top of Settings > Advanced > Code Injection > Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

That worked perfectly! Thank you so much for your help!

hi there, I've followed the guidance on this thread and have successfully added bandcamp and amazon icons from fontawesome in my header. however, i'm trying to have the same replacement icons in the footer, and ideally anytime a social block is used. can you help adjust the code? 

goldlakeband.com
pw: gold 

.header .icon {
    font-family: "Font Awesome 5 Brands";
    color: #F8ECF6;
    display: flex;
    align-content: center;
    align-items: center;
}
.icon[href*="bandcamp"] svg{
  display: none;
}
.icon[href*="bandcamp"]:before {
    content: "\f2d5";
}
.icon[href*="amazon"] svg{
  display: none;
}
.icon[href*="amazon"]:before {
    content: "\f270";
}

1 hour ago, itsbreezy said:

hi there, I've followed the guidance on this thread and have successfully added bandcamp and amazon icons from fontawesome in my header. however, i'm trying to have the same replacement icons in the footer, and ideally anytime a social block is used. can you help adjust the code? 

goldlakeband.com
pw: gold 

.header .icon {
    font-family: "Font Awesome 5 Brands";
    color: #F8ECF6;
    display: flex;
    align-content: center;
    align-items: center;
}
.icon[href*="bandcamp"] svg{
  display: none;
}
.icon[href*="bandcamp"]:before {
    content: "\f2d5";
}
.icon[href*="amazon"] svg{
  display: none;
}
.icon[href*="amazon"]:before {
    content: "\f270";
}

 

Try adding to Home > Design > Custom Css

footer [href*="bandcamp"]:before {
  content: "\f2d5";
  font-family: "Font Awesome 5 Brands";
}

footer [href*="bandcamp"] svg {
  display: none;
}

My testing

that worked perfectly, thank you! 

hello all, I only have a basic plan so I am wondering if that's why I can't do a custom icon?

My site is  https://www.themelgoexperience.com/

My bandcamp is https://melissagordon.bandcamp.com/music

I'd just like the icon at the bottom to be the bandcamp logo and not the link icon. Is that just not possible with a basic plan? Any feedback is appreciated, this area is not my strong suit.

thank you,

Melissa

On 8/17/2023 at 12:07 AM, themelgoexperience said:

hello all, I only have a basic plan so I am wondering if that's why I can't do a custom icon?

 

My site is  https://www.themelgoexperience.com/

 

My bandcamp is https://melissagordon.bandcamp.com/music

 

I'd just like the icon at the bottom to be the bandcamp logo and not the link icon. Is that just not possible with a basic plan? Any feedback is appreciated, this area is not my strong suit.

thank you,

Melissa

Add this to Design > Custom CSS or Website > Website Tools > Custom CSS

/* add Bandcamp icon */
footer.sections a[href*="bandcamp"] svg {
    display: none;
}
footer.sections a[href*="bandcamp"] div {
    background-image: url(https://static1.squarespace.com/static/628cdee1a5d6744370f3ec3d/t/6368f9583c59062c1a4ab3b3/1667823960158/bandcamp-button-circle-line-white-512.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	transform: unset !important;
    filter: invert(1);
}

thank you so much, I really appreciate it!

one more follow up question: is there a way to change the color in this code or no since it looks like it's a PNG? thank you!

On 8/24/2023 at 1:57 AM, themelgoexperience said:

one more follow up question: is there a way to change the color in this code or no since it looks like it's a PNG? thank you!

You can design new icon & replace this icon url