How to Add Custom Social Icons to Squarespace Website
If you are using Squarespace to build your own website, depending on your country, you might want to add social links specific to your region but realize that Squarespace doesn’t provide the social icon for those sites out of box. You can find all natively supported social icons in this KB article. For me, I’d like to add social links for Weibo, Zhihu and Wechat so I can further connect with my readers among those popular Chinese Soical/Content discovery sites.
I use the Code Block to add my custom HTML code. Here is how it looks like in the end:
There custom social icons sitting above the native social link block. Scroll down to the bottom of this page to have a live demo!
Below is the complete code snippet for my implementation.
This implementation has a few features:
auto center within the view page
keep the same icon size with the native social icons (20px)
keep the same spacing between icons
allow to supply your preferred icon style by using an external icon image
if you hover on Wechat icon, a widely used UX pattern is showing the Wechat QR code for users to scan with their Wechat app
Huge shout out to iconfinder service for providing varieties of commonly seen social icons in PNG and SVG format with multiple size options. I highly recommend using it to find social icons you want to add to your site.
If you have any trouble or question regarding using this snippet code, please leave a comment below or in the original Github snippet comment section. Cheers~
Leo
