add individual social media icons to team page

Dear all,

How can I add individual social media icons to each team member under their profile? I want to show their photo, bio and then a few icons underneath for their contact information such as email, facebook, linkedin,...

Thanks a million!

Michael

You can use Code Block + HTML to do this.

A bit complicated. 

Can you share link to team page?

I would love to know the answer to the question above. I'm trying to do the same. I'm somewhat familiar with html. Essentially I'll be doing this underneath every bio. I tried doing it with a gallery as you'll see in the first block, but with mobile, the gallery is left aligning and none of the codes provided to center are working.  https://www.purplecampaign.org/our-team-test

On 3/2/2022 at 11:31 PM, jessb24 said:

I would love to know the answer to the question above. I'm trying to do the same. I'm somewhat familiar with html. Essentially I'll be doing this underneath every bio. I tried doing it with a gallery as you'll see in the first block, but with mobile, the gallery is left aligning and none of the codes provided to center are working.  https://www.purplecampaign.org/our-team-test

The url doesn't exist. Do you still need help?

First, add this to Code Injection > Header

If you use a Personal Plan, Edit Site Footer >> Add a Code Block >> Paste this code

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<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 li i {
    font-size: 30px;
    margin: 0 20px;
}
</style>

Next, on each team people >> Add a Code Block >> Paste this code

<ul class="t-social">
<li>
  <a href="http://m.me/giannicipriano">
  <i class="fab fa-facebook-messenger"></i>
  </a>
</li>
<li>
  <a href="https://wa.me/393285677923">
  <i class="fab fa-whatsapp"></i>
  </a>
</li>
<li>
  <a href="mailto:gianni@giannicipriano.com">
  <i class="fas fa-at"></i>
  </a>
</li>
</ul>

This will add Email, Whatsapp, Facebook icons. Replace url with your urls

If you want to use another icon, let me know, we will give. Or below are some common icons code

• + Email: <i class="far fa-envelope"></i>
  https://fontawesome.com/v5.15/icons/envelope?style=regular
  + Instagram: <i class="fab fa-instagram"></i>
  https://fontawesome.com/v5.15/icons/instagram?style=brands
  + Facebook: <i class="fab fa-facebook-f"></i>
  + Twitter: <i class="fab fa-twitter"></i>
  https://fontawesome.com/v5.15/icons/twitter?style=brands
  + Youtube: <i class="fab fa-youtube"></i>
  + Spofity: <i class="fab fa-spotify"></i>
  + Tiktok: <i class="fab fa-tiktok"></i>
  https://fontawesome.com/v5.15/icons/tiktok?style=brands
  + Behance: <i class="fab fa-behance"></i>
  + Vimeo: <i class="fab fa-vimeo-v"></i>
  + Email: <i class="far fa-envelope"></i>
  + Snapchat: <i class="fab fa-snapchat"></i>
  + Pinterest: <i class="fab fa-pinterest"></i>
  + Etsy: <i class="fab fa-etsy"></i>
  + Linkedin <i class="fab fa-linkedin-in"></i> 
  https://fontawesome.com/v5.15/icons/linkedin-in