Skip to main content
Solved

The icons in the text block are not displayed when sending them

  • September 6, 2022
  • 3 replies
  • 185 views
G
Contributor I
Forum|alt.badge.img+2

In my footer section I have some icons for my customers to access my social networks. The problem is that these icons are not displayed and only the text is seen. for this I use the split block. The first column with text and edit the source code with the following.

- TikTok icon:
<!--?xml version="1.0" ?--><svg height="20" viewbox="0 0 0 448 512" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M448,209.91a210.06,210.06,0,0,0,1-122.77-39.25V349.38A162. 55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path></svg>

-Instagram icon :
<svg height="19" viewbox="0 0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3. 584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-. 07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3. 227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1. 281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-. 072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-. 059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6. 162-6.162zm0 10.162c-2.209 0-4-1.79-4-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>

I don't know what could be the error that causes them not to be seen when I send the mail. As far as I have been able to find out, if the images are not shown they appear, but if the images (logos) are shown in the mail they do not appear. 

I need help! 

Best answer by Dov

Hi @geeroniiimo,

Thank you for sharing this question with us.

Is there a particular reason you’re using a split block? We do have a social link block designed specifically for this purpose. You can also use fully custom social icons using the social link block designed to upload your own image files (you can also try using the “standard” TikTok or Instagram icon URLs here). If you go this route, we recommend using images that are 96px square. To maintain spacing and alignment between Klaviyo's social icons and your custom images, use icons that are 50px wide, and both vertically and horizontally centered in the image file.

I hope that’s helpful.

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Dov
Forum|alt.badge.img+61
  • Dov
  • Klaviyo Alum
  • 1493 replies
  • Answer
  • September 6, 2022

Hi @geeroniiimo,

Thank you for sharing this question with us.

Is there a particular reason you’re using a split block? We do have a social link block designed specifically for this purpose. You can also use fully custom social icons using the social link block designed to upload your own image files (you can also try using the “standard” TikTok or Instagram icon URLs here). If you go this route, we recommend using images that are 96px square. To maintain spacing and alignment between Klaviyo's social icons and your custom images, use icons that are 50px wide, and both vertically and horizontally centered in the image file.

I hope that’s helpful.

 

DD
G
Contributor I
Forum|alt.badge.img+2
  • geeroniiimo
  • Author
  • Contributor I
  • 1 reply
  • September 7, 2022

Hi! @Dov yes, there is a reason why I do this way:

This is my actual footer. With the social link block I can't do this, so because of that I use the split block.

Dov
Forum|alt.badge.img+61
  • Dov
  • Klaviyo Alum
  • 1493 replies
  • September 8, 2022

Hi @geeroniiimo,

Thanks for that information.

We recommend using the social link block because it’s designed to display these icons code-free. If you’d like someone to have a closer look at the source code, you can reach out to our support team for additional recommendations.

Thanks for being a community member.

DD

Reply


Terms & Conditions

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy |
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.