Buy me a coffee

How to Add Social Icons to Squarespace

To add social icons, you can use Social Block.

However, you will not be able to insert icons for many of the same accounts, for example, you cannot insert icons for 2 Instagram accounts, 2 Facebook accounts…

and in this way, I will share how to Add Social Icons for many Social Accounts.

1. Add Code Block

<ul class="t-social">
  <li>
  <a href="https://linkedin.com">
  <i class="fa fa-linkedin-square"></i>
  </a>
</li>
<li>
  <a href="https://twitter.com">
  <i class="fa fa-twitter"></i>
  </a>
</li>
<li>
  <a href="https://pinterest.com">
  <i class="fa fa-pinterest"></i>
  </a>
</li>
<li>
  <a href="https://facebook.com">
  <i class="fa fa-facebook"></i>
  </a>
</li>
<li>
  <a href="https://instagram.com">
  <i class="fa fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https://skype.com">
  <i class="fa fa-skype"></i></a>
  </li>
<li>
  <a href="https://dribble.com">
  <i class="fa fa-dribble"></i>
  </a>
</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
/* Icon color size */
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
/* icon hover color */
  .t-social .fa:hover {color:#4285f4;}
</style>

You will have

2. Customize Icons

2.1. Change Icons & Links

In above code, you will see

<li>

<a href=”https://linkedin.com”>

<i class=”fa fa-linkedin-square”></i>

</a>

</li>

href=”…” is Social Link

<i class=”fa fa-linkedin-square”></i> is Icon Syntax.

Find all icons syntax here. https://fontawesome.com/v4.7.0/icons/

2.2. Icon Color

You will see this code

  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}

It is icon size (font-size: 26px), icon color (color: #8d8d8d) & icon hover color (color: #4285f4).

Featured image by Pixabay.com

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder