Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
TonyN

Adding multiple social Icons to link various profiles

Question

Posted (edited)

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!

 

 

Example A.PNG

Edited by Lystnr

Share this post


Link to post

17 answers to this question

Recommended Posts

  • 0

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.

 

apprearence.PNG

Share this post


Link to post
  • 0
Posted (edited)

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.

Edited by Lystnr

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)

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 🙂

 

Edited by humxahafeex

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)
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?

 

 

Screen Shot 2020-04-21 at 9.16.32 AM.png

Edited by thisismikejones

Share this post


Link to post
  • 0
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

 

 

Share this post


Link to post
  • 0
Posted (edited)
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>

 

Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)
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 🙂

Edited by Marte
Change

Share this post


Link to post
  • 0
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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)
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>

 

Edited by humxahafeex

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...