Bluesky Icon

Thank you so much for this! I followed the instructions and it worked by a simple copy/paste into CSS. But, it made the Bluesky icon square instead of round and I'd love to make it round. Is there a way to do this? Thank you!

My site in case it's helpful: opheliawildink.com

10 hours ago, OpheliaWild said:

Thank you so much for this! I followed the instructions and it worked by a simple copy/paste into CSS. But, it made the Bluesky icon square instead of round and I'd love to make it round. Is there a way to do this? Thank you!

My site in case it's helpful: opheliawildink.com

You can add this extra CSS

a[href*="bsky.app"] {
    border-radius: 50%;
}

13 hours ago, OpheliaWild said:

Thank you so much for this! I followed the instructions and it worked by a simple copy/paste into CSS. But, it made the Bluesky icon square instead of round and I'd love to make it round. Is there a way to do this? Thank you!

My site in case it's helpful: opheliawildink.com

use

a[href*="bsky.app"] svg {
    display: none
}

a[href*="bsky.app"] {
    background: transparent;
    display: inline-block;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='black' d='M4.747 5.105a.94.94 0 0 0-.41.892l.314 3.287A3 3 0 0 0 7.637 12H9a1 1 0 0 1 .371 1.928l-2.34.937c-.885.354-1.122 1.32-.664 1.932c.288.384.576.731.84.996c.233.233.532.485.865.74c.619.475 1.625.214 1.94-.734l1.04-3.115a1 1 0 0 1 1.897 0l1.038 3.115c.316.948 1.322 1.21 1.941.735a9 9 0 0 0 .865-.741c.265-.265.553-.612.84-.996c.458-.612.222-1.578-.664-1.932l-2.34-.937A1 1 0 0 1 15 12h1.363a3 3 0 0 0 2.986-2.716l.314-3.287a.94.94 0 0 0-.41-.892a.75.75 0 0 0-.858-.001c-2.645 1.708-4.05 3.442-5.5 6.343a1 1 0 0 1-1.79 0c-1.45-2.901-2.855-4.635-5.5-6.343a.75.75 0 0 0-.858.001m-2.4 1.082C2.13 3.913 4.567 2.053 6.69 3.424C9.13 5 10.662 6.639 12 8.9c1.338-2.261 2.87-3.9 5.31-5.476c2.123-1.371 4.56.49 4.344 2.763l-.314 3.287a5 5 0 0 1-2.783 4.02c1.329 1.039 1.818 2.978.677 4.502c-.317.423-.669.853-1.027 1.211c-.317.317-.69.628-1.062.914c-1.88 1.441-4.375.35-5.055-1.69l-.09-.269l-.09.27c-.68 2.04-3.175 3.13-5.055 1.689a11 11 0 0 1-1.062-.914a11.5 11.5 0 0 1-1.027-1.211c-1.141-1.524-.651-3.463.678-4.502a5 5 0 0 1-2.784-4.02z'/%3E%3C/g%3E%3C/svg%3E")
}

PS: I wondered if the medium icon is the latest?

On 11/17/2024 at 12:06 PM, Beyondspace said:

Use this Bluesky social icon for your specific site (dark bg, white logo) @johanhccs

a[href*="bsky.app"] svg {
  display: none;
}
a[href*="bsky.app"] {
  background: #000;
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='white' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E");
}

How do I add the Bluesky icon but as a black outline on white bg? Thanks.

58 minutes ago, NikkiBelfield said:

How do I add the Bluesky icon but as a black outline on white bg? Thanks.

Share your url for better reference pls

On 11/25/2024 at 9:18 AM, Beyondspace said:

Share your url for better reference pls

Sorry it is: https://www.autism-alliance.org.uk/ and it's in the footer.

9 minutes ago, NikkiBelfield said:

Sorry it is: https://www.autism-alliance.org.uk/ and it's in the footer.

Bluesky social icon - Black outline - white bg on Footer 

a[href*="bsky.app"][class*=icon] svg {
  display: none;
}
a[href*="bsky.app"][class*=icon] {
  background: #fff;
  display: inline-block;
  width: 1em;
  height: 1em;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='M24 32.19c0-.196.075.025.237.5c.874 2.577 4.289 12.631 12.096 4.593c4.111-4.232 2.208-8.463-5.275-9.741c4.28.73 9.094-.477 10.414-5.212c.38-1.362 1.028-9.752 1.028-10.885c0-5.676-4.96-3.892-8.02-1.587c-4.242 3.195-8.805 9.673-10.48 13.15c-1.675-3.477-6.238-9.954-10.48-13.15C10.46 7.553 5.5 5.77 5.5 11.445c0 1.133.647 9.523 1.028 10.885c1.32 4.735 6.133 5.943 10.414 5.212c-7.483 1.278-9.386 5.51-5.275 9.741c7.807 8.038 11.222-2.016 12.096-4.592c.162-.476.237-.697.237-.501'/%3E%3C/svg%3E")
}

On 11/16/2024 at 10:03 PM, johanhccs said:

Hi,

I've added my Bluesky profile to the "Social Links" block but it doesn't pickup the Bluesky icon. Will squarespace add native support for this or is there another way?

I use the Social Links in my contact page and on the footer (2nd icon)

https://hudcostreets.org/contact

Thanks.

It's now appearing correctly on your contact page in the footer. This not only solved your problem but also helped us out.  

On 11/18/2024 at 3:09 AM, gordonhaywood said:

@Beyondspace

Placed the code in Custom CSS box and as you supected there is no impact in the Social Link box  - the Bluesky icon doesnt appear.

clear your site's cache and check again

If you like to modify the color or shape of the Bluesky logo and make it in your own design:

• you can download the original SVG here: https://commons.wikimedia.org/wiki/File:Bluesky_Logo.svg
• convert it e.g. into a color or shape to your liking in Adobe Illustrator and exported it as SVG again
• upload it onto your Squarespace site as file
  • just make a an empty page
  • add a text block
  • write a word (does not matter what it says)
  • mark that word
  • link that word to a file by clicking "edit" and upload the SVG
  • check "open link in new tab" and save
  • save the change on the page
• then open that page (where you just created that link) in the "normal view" of your website so that a new browser window opens
• then you copy the link of the URL bar – it should something like this "https://static1.squarespace.com/static/.....svg (this is not a working link – just an example)
• now replace the link from the CSS code above in the part "background-image: url(COPY LINK HERE)"
• now you have a new logo in your style

in my case it looks like this (I made it black):

Hi guys. Wondering what the code would be if I wanted the Bluesky icon to match what I'm using for all of my other icons site-wide. I'm using this color for the icons:

#07A2B0

My site background color is:

#150E09

I've also noticed that this CSS only impacts the icon in the footer, but does nothing for the header. Any idea why that might be?

Any help with this would be greatly appreciated. 

54 minutes ago, StardusterScott said:

Hi guys. Wondering what the code would be if I wanted the Bluesky icon to match what I'm using for all of my other icons site-wide. I'm using this color for the icons:

#07A2B0

My site background color is:

#150E09

I've also noticed that this CSS only impacts the icon in the footer, but does nothing for the header. Any idea why that might be?

Any help with this would be greatly appreciated. 

 

What is your site url, help us easier

https://www.scottdavidburgess.com/editorial

Hi Beyondspace.

I'm wondering what your code would be if I wanted the Bluesky icon to match the color I'm using for all of my other  social icons site-wide. I'm using this color for the icons:

#07A2B0

My site background color is:

#150E09

I've also noticed that this CSS only impacts the icon in the footer, but does nothing for the header where it still just displays the default link icon. Any idea why that might be?

For reference, here's a link to one of my pages that displays the icons in both the header and footer:

https://www.scottdavidburgess.com/editorial

Any help with this would be greatly appreciated. 

On 12/3/2024 at 2:45 PM, StardusterScott said:

Hi Beyondspace.

 

I'm wondering what your code would be if I wanted the Bluesky icon to match the color I'm using for all of my other  social icons site-wide. I'm using this color for the icons:

#07A2B0

My site background color is:

#150E09

I've also noticed that this CSS only impacts the icon in the footer, but does nothing for the header where it still just displays the default link icon. Any idea why that might be?

For reference, here's a link to one of my pages that displays the icons in both the header and footer:

https://www.scottdavidburgess.com/editorial

Any help with this would be greatly appreciated. 

bluesky icon - #07A2B0 fill - filled icon

For Cover page, insert this snippet into Page Header Code injection ( hover the cover page name - Click Gear icon - Switch to Advanced

<style>
  a[href*="bsky.app"][class*=icon] svg,
a[href*="bsky.app"][class*=SocialLinks] svg {
  display: none;
}
a[href*="bsky.app"][class*=icon],
a[href*="bsky.app"][class*=SocialLinks] {
  background: transparent;
  display: inline-block;
  width: 14px;
  height: 14px;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%2307A2B0' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E")
}
a[href*="bsky.app"][class*=icon] {
  background-size: 80% 80%;
}

a[href*="bsky.app"][class*="icon"]:hover {
  opacity: 1 !important;
}
.sqs-svg-icon--list:hover a[href*="bsky.app"][class*="icon"],
.social:hover a[href*="bsky.app"][class*="icon"] {
  opacity: 0.3;
  transition: opacity 170ms ease-in-out;
}
</style>

For other pages, insert this snippet into Custom CSS

a[href*="bsky.app"][class*=icon] svg,
a[href*="bsky.app"][class*=SocialLinks] svg {
  display: none;
}
a[href*="bsky.app"][class*=icon],
a[href*="bsky.app"][class*=SocialLinks] {
  background: transparent;
  display: inline-block;
  width: 14px;
  height: 14px;
  box-sizing: border-box; 
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%2307A2B0' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E")
}
a[href*="bsky.app"][class*=icon] {
  background-size: 80% 80%;
}

a[href*="bsky.app"][class*="icon"]:hover {
  opacity: 1 !important;
}
.sqs-svg-icon--list:hover a[href*="bsky.app"][class*="icon"],
.social:hover a[href*="bsky.app"][class*="icon"] {
  opacity: 0.3;
  transition: opacity 170ms ease-in-out;
}

BeyondSpace thank you, but that didn't work for me. In the footer the icon just disappears, and in the header it places the Bluesky icon on top of the Instagram icon. I've attached a screenshot:

Also, BeyondSpace, I notice that in your screenshot, the Bluesky icon does appear but seems to have replaced the Instagram icon as it is no longer visible.

2 hours ago, StardusterScott said:

Also, BeyondSpace, I notice that in your screenshot, the Bluesky icon does appear but seems to have replaced the Instagram icon as it is no longer visible.

Sorry my mistake, pls copy the updated snippet and replace the current one you got

BeyondSpace, that is awesome and works like a charm. I super appreciate it, thank you!

New effect: bluesky social icon with fade effect on hover

BeyondSpace

Sorry, one last question. How do I make this work on my cover page? That one still just shows the default link icon for some reason

//www.scottdavidburgess.com

4 hours ago, StardusterScott said:

BeyondSpace

Sorry, one last question. How do I make this work on my cover page? That one still just shows the default link icon for some reason

//www.scottdavidburgess.com

 

Where is cover page? I can see it work the URL you sent

BeyondSpace

This is the cover page:

https://www.scottdavidburgess.com/

You can also see in the screenshot that on this cover page its still showing the default link icon.

3 hours ago, StardusterScott said:

BeyondSpace

This is the cover page:

https://www.scottdavidburgess.com/

You can also see in the screenshot that on this cover page its still showing the default link icon.

 

You sure to use the latest I gave? when I remove the test code, it show link icon, but use the latest code it show icon

Also I updated it a bit to match the hover effect

BeyondSpace

Hi again. Yes I am definitely using your latest, most recently updated code, including your code with the hover effect. Again, it works on all of my pages on the website except for the cover page. I've tried refreshing several times and tested on three different browsers, but the cover page still displays the default social media icon (its the second from the left in the screenshot):