Jump to content

Social links for team members

Recommended Posts

  • Replies 16
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@AL7GW

Using FontAwesome for this is a great idea. They have a free plan and it's really easy.

You add their code to Page Injection, allowing you to use icons as text. Then add their social links (be sure to open in a new page) to each icon you add to your Text or Markdown block in each section under your team member.

Here's all their free brands links:

https://fontawesome.com/icons?d=gallery&s=brands&m=free

Let me know if this works 🙂

 

 

 

With ❤️, from Andrew @ SQSDesign
Need help building and maintaining your website?

That's all we do: custom blocks, fully-styled templates, product management, POD fulfillment, and more.
Reach out anytime, 24/7/365: 
📱
(628) SQS-DSGN • ✉️ Email • 👀 Instagram • 🚀 RocketSurgery Blog •  🔲 @SQSDesign

Link to comment

Add a Code Block > add this code. You can change link for your icons

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-spotify"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-apple"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-podcast"></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: 20px;
    padding-bottom: 40px;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: left;
  padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0px;
   
  }
  .t-social .fa {
    font-size: 37px;
    margin: 0 20px;
    color: #ffffff;
}
  .t-social .fa:hover {color:#CCCCCC;}
</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
  • 1 year later...
On 12/9/2020 at 4:06 PM, tuanphan said:

Add a Code Block > add this code. You can change link for your icons

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-spotify"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-apple"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-podcast"></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: 20px;
    padding-bottom: 40px;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: left;
  padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0px;
   
  }
  .t-social .fa {
    font-size: 37px;
    margin: 0 20px;
    color: #ffffff;
}
  .t-social .fa:hover {color:#CCCCCC;}
</style>

 

Hi @tuanphan how should I connect an opensea account. It does not have a font awsome icon and I have an image for it so how can i add it along with my other social link accounts when adding for individual members.here is the url: 

https://www.jellyc.io/

Thank you

Link to comment
On 3/19/2022 at 10:16 PM, Asiya said:

Hi @tuanphan how should I connect an opensea account. It does not have a font awsome icon and I have an image for it so how can i add it along with my other social link accounts when adding for individual members.here is the url: 

https://www.jellyc.io/

Thank you

Hi. To use custom image icon, use this new code

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-spotify"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-apple"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-podcast"></i>
  </a>
</li>
  <li>
    <a href="https://opensea.com">
      <img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png" width="30px"/>
    </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: 20px;
    padding-bottom: 40px;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: left;
  padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0px;
   
  }
  .t-social .fa {
    font-size: 37px;
    margin: 0 20px;
    color: #ffffff;
}
  .t-social .fa:hover {color:#CCCCCC;}
</style>

I added this code into above code

<li>
    <a href="https://opensea.com">
      <img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png" width="30px"/>
    </a>
  </li>

 

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
2 hours ago, tuanphan said:

Hi. To use custom image icon, use this new code

<ul class="t-social">
<li>
  <a href="#">
  <i class="fa fa-spotify"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-apple"></i>
  </a>
</li>
<li>
  <a href="#">
  <i class="fa fa-podcast"></i>
  </a>
</li>
  <li>
    <a href="https://opensea.com">
      <img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png" width="30px"/>
    </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: 20px;
    padding-bottom: 40px;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: left;
  padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0px;
   
  }
  .t-social .fa {
    font-size: 37px;
    margin: 0 20px;
    color: #ffffff;
}
  .t-social .fa:hover {color:#CCCCCC;}
</style>

I added this code into above code

<li>
    <a href="https://opensea.com">
      <img src="https://cdn.pixabay.com/photo/2017/06/05/07/58/butterfly-2373175__340.png" width="30px"/>
    </a>
  </li>

 

Thank you so much for your response. the opensea icon is not aligned with the others on my site. can you check that.

Link to comment
15 hours ago, Asiya said:

Thank you so much for your response. the opensea icon is not aligned with the others on my site. can you check that.

Edit this code

.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
}

to this code

.t-social {
    display: flex;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
    justify-content: center;
    align-items: center;
}
ul.t-social a[href*="opensea"] {
    display: block;
    position: relative;
    top: 2px;
}

 

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
10 hours ago, tuanphan said:

Edit this code

.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
}

to this code

.t-social {
    display: flex;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
    justify-content: center;
    align-items: center;
}
ul.t-social a[href*="opensea"] {
    display: block;
    position: relative;
    top: 2px;
}

 

Thank you once again. I am unable to add hiver effect to the opesea icon. can you help in it?

Link to comment
On 3/24/2022 at 9:02 PM, Asiya said:

yes hover effect

Don't remove any code in your current code. Add this to bottom of Code Block

<style>
  ul.t-social a[href*="opensea"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/03/16/06/18/bird-7071662__480.jpg);
}
</style>

replace pixabay url with pink icon 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
On 3/26/2022 at 11:37 AM, tuanphan said:

Don't remove any code in your current code. Add this to bottom of Code Block

<style>
  ul.t-social a[href*="opensea"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2022/03/16/06/18/bird-7071662__480.jpg);
}
</style>

replace pixabay url with pink icon url

thank you so much

Link to comment
  • 1 year later...

Hello, 

I tried using this but it didn't work within blog posts. I would like to add a spotify icon in each blog post, linked to the artist the post is about. I tried using a picture with link, but the picture automatically is very wide. I cannot change that sice with code without it affecting the other images within the blog post. 

Can you help ? 

Link to comment
On 3/22/2022 at 8:46 AM, tuanphan said:

Edit this code

.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
}

to this code

.t-social {
    display: flex;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    padding-left: 0;
    justify-content: center;
    align-items: center;
}
ul.t-social a[href*="opensea"] {
    display: block;
    position: relative;
    top: 2px;
}

 

Hello, 

Any way to adapt this to a blog post ? Thanks

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.