Adding social media logos next to text

Solved
manoman
Excursionist
42 1 5

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!

 

Accepted Solution (1)
Spac-es
Shopify Partner
158 36 52

This is an 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! 

View solution in original post

Replies 7 (7)
Spac-es
Shopify Partner
158 36 52

This is an 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
Excursionist
42 1 5

Thanks! Where do I add that exactly?

Spac-es
Shopify Partner
158 36 52

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

 

Captura de pantalla 2023-11-12 125528.png

 

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>

Captura de pantalla 2023-11-12 125431.png

 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
Excursionist
42 1 5

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
Shopify Partner
158 36 52

Perfect, give me access and I'll do it

manoman
Excursionist
42 1 5

Yes, did you request access?

manoman
Excursionist
42 1 5

2408 request code here! Thanks man