Website Building » Squarespace » How Do I Add Social Icons to Squarespace Footer?

How Do I Add Social Icons to Squarespace Footer?

Last updated on December 10, 2022 @ 6:54 am

Adding social icons to your Squarespace footer is a great way to encourage visitors to connect with you on social media. There are two ways to add social icons to your Squarespace footer: by using the Social Links Block or by adding HTML code.

The first method is to use the Social Links Block. This block can be found in the Blocks panel. To add the block, simply drag and drop it into the footer of your page. Once the block is in place, you can click on the gear icon to configure your social links.

You can add links to Facebook, Twitter, Instagram, YouTube, and more. To style your social icons, click on the Design tab and then click on Site Footer. From here, you can change the color, size, and shape of your social icons.

The second method is to add HTML code. This method requires a bit more code than the first method, but it gives you more control over how your social icons look. To get started, go to Settings > Advanced > Code Injection and paste the following code into the Footer Code box:

<ul class="social-icons">
<li><a href="#"><img src="http://placehold.it/32x32"></a></li>
<li><a href="#"><img src="http://placehold.it/32x32"></a></li>
<;/ul

PRO TIP: Adding social media icons to your website footer is a great way to stay connected with your audience. However, before you add these icons, please be sure to read the following warnings:

1. Make sure that the social media sites you are linking to are appropriate for your audience. Remember that your website represents your brand, so you want to make sure that the social media sites you are linking to are in line with your values.

2. Be careful not to overdo it with the social media icons. Too many icons can be confusing and overwhelming for visitors. Stick to a few key platforms that are most relevant to your audience.

3. Keep the icons up-to-date. Social media sites are constantly changing, so be sure to update the icons on your website footer accordingly. This will ensure that visitors can easily find and connect with you on their preferred platform.

Replace the placeholder images with your own social icons. You can find free social icons online or you can create your own using an icon editor like Adobe Photoshop or Sketch.

Once you’ve added your social icons, you can style them using CSS code. For example, to change the color of your social icons, paste the following code into the Custom CSS box:

.social-icons img {
color: #ffffff;}

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.