Jump to content

Adding multiple social Icons to link various profiles

Recommended Posts

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
Link to comment

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

Link to comment

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
Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
Link to comment
  • 5 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
Link to comment
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

 

 

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
Link to comment
  • 2 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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! 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.