Tiktok Bootstrap Icon is cut off on the bottom

Bug Reports
1

I’m not sure if this is a bug/Bootstrap Studio problem, or a bug with Bootstrap itself, but if you use the Bootstrap tiktok icon, the bottom is cut off. The cut off is visible in both the BSS icon preview window, and when the icon is placed on a page…

image
image751×301 12.2 KB

Here’s the icon when added to my website…

image

(The other social media icons used in this example are from Font Awesome 4)

If I change the overflow rule for svg images in Bootstrap’s CSS from hidden (default) to visible, the icon is no longer cut off. So it seems to be a positioning issue with the svg, but I’m still not sure if this is a Bootstrap Studio issue.

image

Here I’ve added a custom code component and added the HTML svg code (below) for the tiktok icon directly from Bootstrap’s website

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-tiktok" viewBox="0 0 16 16">
  <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
</svg>

image
Now it’s no longer cut off, and it has been shifted up vertically by a few pixels.

I’d be interested in hearing what the devs (@martin @gabby) or anyone else makes of this.

2

If you have customized the css for the icons, height, width, margin and or spacing, you may have generated this cut.

3

The cut off is visible in Bootstrap Studio’s icon preview window, which is unaffected by anything on the website. You can easily reproduce this youself. Create a new website, drag an icon Component onto the page, double-click it, choose Bootstrap Icons from the dropdown and type in Tik Tok in the search.

4

Thanks for reporting this! The icon is cut off in the Bootstrap Icons version we use in the app. They have fixed it in newer versions. We will update the icons to the latest available version in our next release.