How can I add small social media logos next to text on my website?

[manoman]

Hello!

I have a simple request, is it possible for me to add small social media logos next to a rich text on my website? I have made a picture displaying how I want it.

Here is the example: https://i.gyazo.com/cba1de164f554c3fae24a2d5ca83c1f3.png

So, where I have painted a red circle is where I want to add the social media logos. So for example, a small telegram logo next to the telegram, same for the whatsapp and snapchat. If I could replace the dots, or keep the dots. I would like to try and see how it looks.

Site URL: https://3019b0-2.myshopify.com/
Password: mano

Thank you!

[Spac-es · Accepted solution]

To add social media logos you must first install a well-known library called fontawesome.com from theme.liquid add this code:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

And now you can add any logo wherever you want. For the logos you request:

<i class="fa-brands fa-whatsapp"></i>

<i class="fa-brands fa-snapchat"></i>

<i class="fa-brands fa-telegram"></i>

Remember that you can change the color, size and add animations, such as:

<i class="fa-brands fa-shopify fa-beat-fade fa-lg" style="color: #22a53c;"></i>

 I hope it helped you! 

[manoman]

Thanks! Where do I add that exactly?

[Spac-es]

You must add the code in your image-with-text.liquid, where you have the <ul> and <li> elements:

Example code:

<li style="list-style: none; padding-left: 0;"><i class="fa-brands fa-telegram" style="margin-right:15px; margin-left: 10px;"></i><strong>TELEGRAM:</strong> Your Telegram</li>

 In the example code I have hidden the list points (<li>) with CSS:

style="list-style: none; padding-left: 0;"

And this part of the code adds margin to the logo:

style="margin-right:15px; margin-left: 10px;"

[manoman]

Brother, I am too stupid. Is it possible I give you store access and you can help me? I can pay a few dollars for it if you want. 🙂 Or if you can explain more thorougly... Thanks so much for the help.

[Spac-es]

Perfect, give me access and I'll do it

[manoman]

Yes, did you request access?

[manoman]

2408 request code here! Thanks man