Adding multiple social Icons to link various profiles

TonyN · March 11, 2020

Issue: I need to be able to link multiple social icons such as Instagram and Facebook etc to point to various outside social profiles. Using the built-in social link is not an option. Social icon images must left align with little padding.

Please note that this for a personal plan website so there is no ability to do a code injection. I know there are posts out there suggesting using Font awesome etc. but in this case that is not a viable route.

It looks like I may have to use a code block with HTML? Can someone provide example code to align the two image icons I have in the attached screenshot using a code block? I will need to do this on several pages. I just need a push in the right direction.

Thanks in advance!

humxahafeex · March 11, 2020

Hi , It's Quite Simple Please follow the steps as follows:

Step 1 : Create a code Block.

Step 2: Paste the following code in it.

Step 3 : Replace the links for your facebook /insta in the code and save it .

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<i class="fa fa-instagram" aria-hidden="true"><a href="#your_instagram_link"></a></i>

<i class="fa fa-facebook-official" aria-hidden="true"><a href="#your_facebook_link"></a></i>

How it will look is shown in attached Image.

Hope it Helps.

TonyN · March 12, 2020

Thanks for your reply. However per my original post, font awesome is not viable because it requires a code injection and this is a personal plan and not business plan website. Your recommendation requires a code injection of the CDN code in order for it to work.

tuanphan · March 12, 2020

You can use SVG html code. It work work in Personal Plan.

I did for a client 3-4 months ago.

I will check again to see if I can find the code.

TonyN · March 13, 2020

Appreciate @tuanphan! Looking forward to your reply.

tuanphan · March 14, 2020

Add Code Block > Paste Code

16 hours ago, Lystnr said:

Appreciate @tuanphan! Looking forward to your reply.

<svg class="svg--source" width="0" height="0" aria-hidden="true">
  <symbol id="svg--twitter" viewbox="0 -7 15 30">
    <path d="M15.36 3.434c-0.542 0.241-1.124 0.402-1.735 0.476 0.624-0.374 1.103-0.966 1.328-1.67-0.583 0.346-1.23 0.598-1.917 0.733-0.551-0.587-1.336-0.954-2.205-0.954-1.668 0-3.020 1.352-3.020 3.019 0 0.237 0.026 0.467 0.078 0.688-2.51-0.126-4.735-1.328-6.224-3.155-0.261 0.446-0.41 0.965-0.41 1.518 0 1.048 0.534 1.972 1.344 2.514-0.495-0.016-0.961-0.151-1.368-0.378 0 0.013 0 0.025 0 0.038 0 1.463 1.042 2.683 2.422 2.962-0.253 0.069-0.52 0.106-0.796 0.106-0.194 0-0.383-0.018-0.568-0.054 0.384 1.2 1.5 2.073 2.821 2.097-1.034 0.81-2.335 1.293-3.75 1.293-0.244 0-0.484-0.014-0.72-0.042 1.336 0.857 2.923 1.357 4.63 1.357 5.554 0 8.592-4.602 8.592-8.593 0-0.13-0.002-0.261-0.009-0.39 0.59-0.426 1.102-0.958 1.507-1.563z"
    />
  </symbol>

  <symbol id="svg--facebook" viewbox="0 -7 16 30">
    <path d="M12 3.303h-2.285c-0.27 0-0.572 0.355-0.572 0.831v1.65h2.857v2.352h-2.857v7.064h-2.698v-7.063h-2.446v-2.353h2.446v-1.384c0-1.985 1.378-3.6 3.269-3.6h2.286v2.503z" />
  </symbol>
  <symbol id="svg--youtube" viewbox="-150 -150 800 800">
    <path d="M459,61.2C443.7,56.1,349.35,51,255,51c-94.35,0-188.7,5.1-204,10.2C10.2,73.95,0,163.2,0,255s10.2,181.05,51,193.8
			C66.3,453.9,160.65,459,255,459c94.35,0,188.7-5.1,204-10.2c40.8-12.75,51-102,51-193.8S499.8,73.95,459,61.2z M204,369.75v-229.5
			L357,255L204,369.75z" />
  </symbol>

</svg>

<div class="wrapper">
<div class="connect">
  <a href="" class="share twitter">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--twitter" />
    </svg>
    <span class="clip">TWITTER</span>
  </a>
  <a href="" rel="author" class="share facebook">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--facebook" />
      <span class="clip">FACEBOOK</span>
    </svg>
  </a>
  <a href="" class="share  youtube">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--youtube" />
      <span class="clip">YOU-TUBE</span>
    </svg>
  </a>
</div>
</div>
<style>
  .clip {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.svg--source {
  display: none;
}

.svg--icon {
  width: 100%;
  max-width: 5rem;
  height: 100%;
  max-height: 5rem;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 1rem;
}

.share {
  width: 5rem;
  height: 5rem;
  float: left;
  margin: .5rem 1rem .5rem 0;
  color: #353c4a;
  border: .125rem solid #f3f3f3;
  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
  border-radius: 50%;
  -webkit-transition: 250ms;
  transition: 250ms;
}
.share:last-child {
  margin-right: 0;
}
.share:focus {
  outline-color: inherit;
}

.twitter:hover, .twitter:focus {
  color: #00ACED;
  box-shadow: 0 0 24px 0 #00ACED;
}

.youtube:hover, .youtube:focus {
  color: #cd201f;
  box-shadow: 0 0 24px 0 #cd201f;
}

.facebook:hover, .facebook:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}

</style>

Code by Kevin Dewar, Codepen.io

humxahafeex · March 14, 2020

Hi @Lystnr Oh sorry I missed that point , It's quite easy to do this on personal plan too not a big deal , Let me tell you how 🙂

I see @tuanphan shared a nice solution but it's quite long and need tons of css. Let me suggest some clean solution to this.

Let's Use squarespace own social link block (It will do css by it self) here Just use the following code as below in Code Block:

<div class="sqs-svg-icon--outer social-icon-alignment-center social-icons-color-black social-icons-size-small social-icons-style-regular ">
  <nav class="sqs-svg-icon--list">
    
    <a href="#YOUR FACEBOOK LINK" target="_blank" class="sqs-svg-icon--wrapper facebook-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="#facebook-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="#facebook-unauth-mask"></use>
        </svg>
      </div>
    </a>
    
    <a href="#YOUR INSTA LINK" target="_blank" class="sqs-svg-icon--wrapper instagram-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="#instagram-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="#instagram-unauth-mask"></use>
        </svg>
      </div>
    </a>
  </nav>
</div>

I hope it works as required 🙂

TonyN · March 18, 2020

Thanks everyone got it working now!

thisismikejones · April 16, 2020

@tuanphan when I add this to my site it is causing a huge amount of padding above and below it. Do you have any idea why that may be taking place?

tuanphan · April 18, 2020

On 4/17/2020 at 3:54 AM, thisismikejones said:

@tuanphan when I add this to my site it is causing a huge amount of padding above and below it. Do you have any idea why that may be taking place?

Can you share link to page where you used above code?

You can also use code from humxahafeex, above

thisismikejones · April 20, 2020

@tuanphan I got it to work on your code, thank you! Do you by chance have a version that includes Instagram?

tuanphan · April 21, 2020

14 hours ago, thisismikejones said:

@tuanphan I got it to work on your code, thank you! Do you by chance have a version that includes Instagram?

<svg class="svg--source" width="0" height="0" aria-hidden="true">
  <symbol id="svg--twitter" viewbox="0 -7 15 30">
    <path d="M15.36 3.434c-0.542 0.241-1.124 0.402-1.735 0.476 0.624-0.374 1.103-0.966 1.328-1.67-0.583 0.346-1.23 0.598-1.917 0.733-0.551-0.587-1.336-0.954-2.205-0.954-1.668 0-3.020 1.352-3.020 3.019 0 0.237 0.026 0.467 0.078 0.688-2.51-0.126-4.735-1.328-6.224-3.155-0.261 0.446-0.41 0.965-0.41 1.518 0 1.048 0.534 1.972 1.344 2.514-0.495-0.016-0.961-0.151-1.368-0.378 0 0.013 0 0.025 0 0.038 0 1.463 1.042 2.683 2.422 2.962-0.253 0.069-0.52 0.106-0.796 0.106-0.194 0-0.383-0.018-0.568-0.054 0.384 1.2 1.5 2.073 2.821 2.097-1.034 0.81-2.335 1.293-3.75 1.293-0.244 0-0.484-0.014-0.72-0.042 1.336 0.857 2.923 1.357 4.63 1.357 5.554 0 8.592-4.602 8.592-8.593 0-0.13-0.002-0.261-0.009-0.39 0.59-0.426 1.102-0.958 1.507-1.563z"
    />
  </symbol>

  <symbol id="svg--facebook" viewbox="0 -7 16 30">
    <path d="M12 3.303h-2.285c-0.27 0-0.572 0.355-0.572 0.831v1.65h2.857v2.352h-2.857v7.064h-2.698v-7.063h-2.446v-2.353h2.446v-1.384c0-1.985 1.378-3.6 3.269-3.6h2.286v2.503z" />
  </symbol>
  <symbol id="svg--youtube" viewbox="-150 -150 800 800">
    <path d="M459,61.2C443.7,56.1,349.35,51,255,51c-94.35,0-188.7,5.1-204,10.2C10.2,73.95,0,163.2,0,255s10.2,181.05,51,193.8
			C66.3,453.9,160.65,459,255,459c94.35,0,188.7-5.1,204-10.2c40.8-12.75,51-102,51-193.8S499.8,73.95,459,61.2z M204,369.75v-229.5
			L357,255L204,369.75z" />
  </symbol>

</svg>

<div class="wrapper">
<div class="connect">
  <a href="" class="share twitter">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--twitter" />
    </svg>
    <span class="clip">TWITTER</span>
  </a>
  <a href="" rel="author" class="share facebook">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--facebook" />
      <span class="clip">FACEBOOK</span>
    </svg>
  </a>
  <a href="" class="share  youtube">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--youtube" />
      <span class="clip">YOU-TUBE</span>
    </svg>
  </a>
  <a href="" class="share  instagram">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--instagram" />
      <span class="clip">INSTAGRAM</span>
    </svg>
  </a>
</div>
</div>
<style>
  .clip {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.svg--source {
  display: none;
}

.svg--icon {
  width: 100%;
  max-width: 5rem;
  height: 100%;
  max-height: 5rem;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 1rem;
}

.share {
  width: 5rem;
  height: 5rem;
  float: left;
  margin: .5rem 1rem .5rem 0;
  color: #353c4a;
  border: .125rem solid #f3f3f3;
  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
  border-radius: 50%;
  -webkit-transition: 250ms;
  transition: 250ms;
}
.share:last-child {
  margin-right: 0;
}
.share:focus {
  outline-color: inherit;
}

.twitter:hover, .twitter:focus {
  color: #00ACED;
  box-shadow: 0 0 24px 0 #00ACED;
}

.youtube:hover, .youtube:focus {
  color: #cd201f;
  box-shadow: 0 0 24px 0 #cd201f;
}

.facebook:hover, .facebook:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}
.instagram:hover, .instagram:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}
</style>

thisismikejones · April 21, 2020

18 minutes ago, tuanphan said:


<svg class="svg--source" width="0" height="0" aria-hidden="true">
  <symbol id="svg--twitter" viewbox="0 -7 15 30">
    <path d="M15.36 3.434c-0.542 0.241-1.124 0.402-1.735 0.476 0.624-0.374 1.103-0.966 1.328-1.67-0.583 0.346-1.23 0.598-1.917 0.733-0.551-0.587-1.336-0.954-2.205-0.954-1.668 0-3.020 1.352-3.020 3.019 0 0.237 0.026 0.467 0.078 0.688-2.51-0.126-4.735-1.328-6.224-3.155-0.261 0.446-0.41 0.965-0.41 1.518 0 1.048 0.534 1.972 1.344 2.514-0.495-0.016-0.961-0.151-1.368-0.378 0 0.013 0 0.025 0 0.038 0 1.463 1.042 2.683 2.422 2.962-0.253 0.069-0.52 0.106-0.796 0.106-0.194 0-0.383-0.018-0.568-0.054 0.384 1.2 1.5 2.073 2.821 2.097-1.034 0.81-2.335 1.293-3.75 1.293-0.244 0-0.484-0.014-0.72-0.042 1.336 0.857 2.923 1.357 4.63 1.357 5.554 0 8.592-4.602 8.592-8.593 0-0.13-0.002-0.261-0.009-0.39 0.59-0.426 1.102-0.958 1.507-1.563z"
    />
  </symbol>

  <symbol id="svg--facebook" viewbox="0 -7 16 30">
    <path d="M12 3.303h-2.285c-0.27 0-0.572 0.355-0.572 0.831v1.65h2.857v2.352h-2.857v7.064h-2.698v-7.063h-2.446v-2.353h2.446v-1.384c0-1.985 1.378-3.6 3.269-3.6h2.286v2.503z" />
  </symbol>
  <symbol id="svg--youtube" viewbox="-150 -150 800 800">
    <path d="M459,61.2C443.7,56.1,349.35,51,255,51c-94.35,0-188.7,5.1-204,10.2C10.2,73.95,0,163.2,0,255s10.2,181.05,51,193.8
			C66.3,453.9,160.65,459,255,459c94.35,0,188.7-5.1,204-10.2c40.8-12.75,51-102,51-193.8S499.8,73.95,459,61.2z M204,369.75v-229.5
			L357,255L204,369.75z" />
  </symbol>

</svg>

<div class="wrapper">
<div class="connect">
  <a href="" class="share twitter">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--twitter" />
    </svg>
    <span class="clip">TWITTER</span>
  </a>
  <a href="" rel="author" class="share facebook">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--facebook" />
      <span class="clip">FACEBOOK</span>
    </svg>
  </a>
  <a href="" class="share  youtube">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--youtube" />
      <span class="clip">YOU-TUBE</span>
    </svg>
  </a>
  <a href="" class="share  instagram">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--instagram" />
      <span class="clip">INSTAGRAM</span>
    </svg>
  </a>
</div>
</div>
<style>
  .clip {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.svg--source {
  display: none;
}

.svg--icon {
  width: 100%;
  max-width: 5rem;
  height: 100%;
  max-height: 5rem;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 1rem;
}

.share {
  width: 5rem;
  height: 5rem;
  float: left;
  margin: .5rem 1rem .5rem 0;
  color: #353c4a;
  border: .125rem solid #f3f3f3;
  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
  border-radius: 50%;
  -webkit-transition: 250ms;
  transition: 250ms;
}
.share:last-child {
  margin-right: 0;
}
.share:focus {
  outline-color: inherit;
}

.twitter:hover, .twitter:focus {
  color: #00ACED;
  box-shadow: 0 0 24px 0 #00ACED;
}

.youtube:hover, .youtube:focus {
  color: #cd201f;
  box-shadow: 0 0 24px 0 #cd201f;
}

.facebook:hover, .facebook:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}
.instagram:hover, .instagram:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}
</style>

@tuanphan So I tried adding it that way before as well and it doesn't pull an icon for Instagram. I just tried copying yours and got the same issue. Any other thoughts?

Espen · April 23, 2020

On 3/14/2020 at 2:29 PM, humxahafeex said:

Hi @Lystnr Oh sorry I missed that point , It's quite easy to do this on personal plan too not a big deal , Let me tell you how 🙂

I see @tuanphan shared a nice solution but it's quite long and need tons of css. Let me suggest some clean solution to this.

Let's Use squarespace own social link block (It will do css by it self) here Just use the following code as below in Code Block:


<div class="sqs-svg-icon--outer social-icon-alignment-center social-icons-color-black social-icons-size-small social-icons-style-regular ">
  <nav class="sqs-svg-icon--list">
    
    <a href="#YOUR FACEBOOK LINK" target="_blank" class="sqs-svg-icon--wrapper facebook-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="#facebook-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="#facebook-unauth-mask"></use>
        </svg>
      </div>
    </a>
    
    <a href="#YOUR INSTA LINK" target="_blank" class="sqs-svg-icon--wrapper instagram-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="#instagram-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="#instagram-unauth-mask"></use>
        </svg>
      </div>
    </a>
  </nav>
</div>

I hope it works as required 🙂

Does LinkedIn work for you guys with this code??

//E

tuanphan · May 2, 2020

On 4/23/2020 at 10:20 PM, Espen said:

Does LinkedIn work for you guys with this code??

//E

You can also add this to Code Block

<ul class="t-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-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></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;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

Posted May 3, 2020 · May 3, 2020

On 3/14/2020 at 8:29 AM, humxahafeex said:

Hi @Lystnr Oh sorry I missed that point , It's quite easy to do this on personal plan too not a big deal , Let me tell you how 🙂

I see @tuanphan shared a nice solution but it's quite long and need tons of css. Let me suggest some clean solution to this.

Let's Use squarespace own social link block (It will do css by it self) here Just use the following code as below in Code Block:


<div class="sqs-svg-icon--outer social-icon-alignment-center social-icons-color-black social-icons-size-small social-icons-style-regular ">
  <nav class="sqs-svg-icon--list">
    
    <a href="#YOUR FACEBOOK LINK" target="_blank" class="sqs-svg-icon--wrapper facebook-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="#facebook-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="#facebook-unauth-mask"></use>
        </svg>
      </div>
    </a>
    
    <a href="#YOUR INSTA LINK" target="_blank" class="sqs-svg-icon--wrapper instagram-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="#instagram-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="#instagram-unauth-mask"></use>
        </svg>
      </div>
    </a>
  </nav>
</div>

I hope it works as required 🙂

Hi,

I can only make your code work for me - none of the others come up correctly. Any chance you wanna post a code for Twitter, YouTube and Email too? I would be forever grateful. Thank you in advance 🙂

tuanphan · May 4, 2020

13 hours ago, Marte said:

Hi,

I can only make your code work for me - none of the others come up correctly. Any chance you wanna post a code for Twitter, YouTube and Email too? I would be forever grateful. Thank you in advance 🙂

Add this to Code Block, find other icons code at here https://fontawesome.com/v4.7.0/icons/

<ul class="t-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-facebook"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-instagram"></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;
  }
  .t-social .fa {
    font-size: 26px;
    margin: 0 8px;
    color: #8d8d8d;
}
  .t-social .fa:hover {color:#4285f4;}
</style>

humxahafeex · May 8, 2020

On 5/3/2020 at 10:51 PM, Marte said:

Hi,

I can only make your code work for me - none of the others come up correctly. Any chance you wanna post a code for Twitter, YouTube and Email too? I would be forever grateful. Thank you in advance 🙂

Hi , Been Busy for a while , Sure here you Go Hope it helps 🙂

<div class="sqs-svg-icon--outer social-icon-alignment-center social-icons-color-white social-icons-size-small social-icons-style-regular ">
  <nav class="sqs-svg-icon--list">
    <a href="YOUR FACEBOOK LINK" target="_blank" class="sqs-svg-icon--wrapper facebook-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="/universal/svg/social-accounts.svg#facebook-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="/universal/svg/social-accounts.svg#facebook-unauth-mask"></use>
        </svg>
      </div>
    </a><a href="YOUR INSTA LINK" target="_blank" class="sqs-svg-icon--wrapper instagram-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="/universal/svg/social-accounts.svg#instagram-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="/universal/svg/social-accounts.svg#instagram-unauth-mask"></use>
        </svg>
      </div>
    </a><a href="YOUR TWITTER LINK" target="_blank" class="sqs-svg-icon--wrapper twitter-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="/universal/svg/social-accounts.svg#twitter-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="/universal/svg/social-accounts.svg#twitter-unauth-mask"></use>
        </svg>
      </div>
    </a><a href="YOUR YOUTUBE LINK" target="_blank" class="sqs-svg-icon--wrapper youtube-unauth">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="/universal/svg/social-accounts.svg#youtube-unauth-icon"></use>
          <use class="sqs-use--mask" xlink:href="/universal/svg/social-accounts.svg#youtube-unauth-mask"></use>
        </svg>
      </div>
    </a><a href="YOUR MAILING ADDRESS" target="_blank" class="sqs-svg-icon--wrapper email">
      <div>
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
          <use class="sqs-use--icon" xlink:href="/universal/svg/social-accounts.svg#email-icon"></use>
          <use class="sqs-use--mask" xlink:href="/universal/svg/social-accounts.svg#email-mask"></use>
        </svg>
      </div>
    </a>
  </nav>
</div>

mgaisbacher · August 8, 2020

I am trying to do the same thing. I am trying to use the code from @humxahafeex but it comes up as an empty block when after I copy the code.

tuanphan · August 9, 2020

17 hours ago, mgaisbacher said:

I am trying to do the same thing. I am trying to use the code from @humxahafeex but it comes up as an empty block when after I copy the code.

can you share link to page where you inserted code? We can check easier.

mgaisbacher · August 9, 2020

Quote

5 hours ago, tuanphan said:

can you share link to page where you inserted code? We can check easier.

It's just a trial page so not sure if this link will work https://viola-strawberry-c2te.squarespace.com/hawktail

trying to put the social links right under the title on the top section. At the moment it is there in a code block but nothing is showing up.

If that link doesn't work I plan on transferring this to a live page in the next couple days so I could share it then as well.

Thanks!

tuanphan · August 10, 2020

19 hours ago, mgaisbacher said:

It's just a trial page so not sure if this link will work https://viola-strawberry-c2te.squarespace.com/hawktail

trying to put the social links right under the title on the top section. At the moment it is there in a code block but nothing is showing up.

If that link doesn't work I plan on transferring this to a live page in the next couple days so I could share it then as well.

Thanks!

Your site is private. You can setup password & share url

mgaisbacher · August 10, 2020

@tuanphan just added a temp password, which is just "password"

Thanks!

tuanphan · August 12, 2020

On 8/10/2020 at 9:56 PM, mgaisbacher said:

@tuanphan just added a temp password, which is just "password"

Thanks!

Where Code Block. Can you take a screenshot?

mgaisbacher · August 12, 2020

Sure, here it is.

Adding multiple social Icons to link various profiles

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Archived

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources