MishaGo Posted January 22, 2020 Share Posted January 22, 2020 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 JohnBroaders 1 Link to comment
tuanphan Posted January 23, 2020 Share Posted January 23, 2020 You can use Code Block + HTML to do this. A bit complicated. Can you share link to team page? 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
jessb24 Posted March 2, 2022 Share Posted March 2, 2022 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 Link to comment
tuanphan Posted March 6, 2022 Share Posted March 6, 2022 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment