How to add Bluesky icon to your Header and Social media Blocks
This tutorial will show you how to add Bluesky icon for social links using custom CSS in your Squarespace website. This tutorial is specifically designed for Squarespace 7.1. Currently an icon option for Bluesky is not available, so we have to use a work around. This solution is credited to Tuanphan
Table of Contents
Why Add a Bluesky Icon?
Bluesky is gaining popularity as a decentralized social media platform, and adding its icon to your website helps visitors easily find and connect with your profile. Whether you're a brand, content creator, or business, displaying a Bluesky icon enhances your online presence.
Benefits of Adding Bluesky Icons:
Increases Visibility: Helps visitors discover your Bluesky profile quickly.
Enhances Credibility: Shows that you're active on decentralized social platforms.
Improves Engagement: Encourages users to follow and interact with you.
Consistent Branding: Keeps your social media links organized and accessible.
Boosts Traffic: Directs more visitors to your Bluesky profile.
Complexity: Easy
How to Add a Bluesky Icon — Step-by-Step Guide
Step 1
Once you have created your Bluesky link, simply copy the css code below and from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
a[href*="bluesky"].sqs-svg-icon--wrapper, a[href*="bluesky"].header-icon, a[href*="bsky"].sqs-svg-icon--wrapper, a[href*="bsky"].header-icon {
& {
display: flex;
align-items: center;
}
svg, div {
display: none;
}
&::before {
content: "\e671";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 15px;
}}
a[href*="bluesky"].header-icon::before, a[href*="bsky"].header-icon::before {
top: 5px;
position :relative;
}
Step 2
Copy the code and from the Squarespace dashboard navigate to Pages > Custom Code > Code Injection > Header and paste the code.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
Step 3
Adjust the color and font-size values to your liking.
color: #000;
font-size: 15px;.
FAQs
Can I add a Bluesky icon to Squarespace without code?
Currently, Squarespace doesn’t natively offer a Bluesky icon, so using this CSS and Font Awesome workaround is the best solution.
Will this method work on all Squarespace versions?
This tutorial is specifically for Squarespace 7.1. If you’re using another version, the method might need adjustments.
Is Font Awesome free to use for this?
Yes! Font Awesome’s free CDN (used in this tutorial) includes the Bluesky icon, so you don’t need a paid plan.
Conclusion
Integrating Bluesky icons into your site is a simple but effective way to expand your online reach. Whether placed in headers, footers, or social media sections, these icons make it easy for visitors to connect with you on this emerging platform.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
