Social links for team members

Hello. I want to add individual social links to my team page but I am having trouble finding the correct code. Can anyone help on this issue? 

@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 🙂

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>

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

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>

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.

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;
}

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?

On 3/23/2022 at 1:24 AM, Asiya said:

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

What is hiver effect? You mean hover effect?

7 hours ago, tuanphan said:

What is hiver effect? You mean hover effect?

yes hover effect

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

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

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 ? 

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

On 9/28/2023 at 1:40 PM, Priscillia said:

Hello, 

Any way to adapt this to a blog post ? Thanks

Can you share link to a blog post?

On 10/2/2023 at 12:48 AM, tuanphan said:

Can you share link to a blog post?

Hello, shared in this other topic : 

On 10/3/2023 at 10:00 PM, Priscillia said:

Hello, shared in this other topic : 

 

It says this to me