Solved

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

  • 6 September 2022
  • 3 replies
  • 114 views

Badge +1

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! 

icon

Best answer by Dov 6 September 2022, 21:02

View original

3 replies

Userlevel 7
Badge +61

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.

 

Badge +1

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.

Userlevel 7
Badge +61

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.

Reply