Add Custom Link Social Icons

If you add a Social Links block on Squarespace, you’re only able to add links universally. This means, if you have an “Our Teams” page for example, you can’t show different social links for each team member. You might want to use them to show the icons for LinkedIn, Twitter, Facebook, Instagram, Skype, etc.

To add them, put the code below into a Code Block, and drag them to where you want them on your website. You’ll notice that each <a> tag has a corresponding <i> tag inside of it. To change the link, replace the # with the URL. To change the icon, replace the name of the social media type after “fa-”. For example, “fa-twitter” will display the Twitter icon, and “fa-pinterest” will display the Pinterest icon. To figure out which word to put after “fa-”, you can look it up under the ‘Brand Icons’ section on the Font Awesome website.

<ul class="social">
  <li>
    <a href="#">
      <i class="fa fa-twitter"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-pinterest"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-linkedin"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-instagram"></i>
    </a>
  </li>
</ul>

Put the following in Setting -> Advanced -> Code Injection -> Header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Put the following in Design -> Custom CSS:

/* Code Block Padding on Top and Bottom */
.code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  
/* Display Social Icons */
.social {
  display: block;
  margin: 0 auto;
  padding-top: 5px;
  text-align: center;
  padding-left: 0;
}
.social li {
  display: inline-block;
  margin: 0;
  line-height: 100% !important;
}
.social .fa {
  font-size: 26px;
  margin: 0 8px;
  color: #8d8d8d;
}

/* Change Hover Color */
.social .fa:hover {
  color:#4285f4;
}

Preview of the code above:

Customize:

• To left-justify the icons, change “text-align: center” to “text-align: left”

• To right-justify the icons, change “text-align: center” to “text-align: right”

• To change the size of the icons, change the font-size under .social .fa

• To change the color of the icons, change the color under .social .fa

• To change the hover color, change the color under .social .fa:hover