时间戳

首页 > 解决方案 > Tik Tok 社交媒体按钮未在我的网页中显示 tik tok 徽标

html - Tik Tok 社交媒体按钮未在我的网页中显示 tik tok 徽标

问题描述

我想为我的网页制作一个 tik tok 按钮。我不是设置它的人。它带有 Instagram、Twitter 和 Discord 按钮，我想制作一个 Tik Tok 按钮，但它没有显示 Tik Tok 的徽标。 社交媒体按钮

除了编辑一些 HTML，我不了解网页设计，所以我所做的是复制不和谐按钮的 CSS 代码并为 tik tok 按钮创建一个新类。这是两个按钮的代码：

不和谐：

.footer-container .footer-social-buttons a.discord-button:before {
  background-color: #fff;
  -webkit-mask: url(../images/web/discord-brands.svg) no-repeat center;
  mask: url(../images/web/discord-brands.svg) no-repeat center;
  content: "";
  width: inherit;
  height: 24px;
  margin-top: 9px;
}

抖音：

.footer-container .footer-social-buttons a.tiktok-button:before {
    background-color: #fff;
    -webkit-mask: url(../images/web/tiktok-white.svg) no-repeat center;
    mask: url(../images/web/tiktok-white.svg) no-repeat center;
    content: "";
    width: inherit;
    height: 24px;
    margin-top: 9px;
}

因为这是合乎逻辑的，我在 url 指向的文件夹中添加了一个 tik tok logo .svg 文件，但由于某种原因，它没有在按钮中显示徽标。这是按钮部分的网页 HTML 代码：

<footer class="footer-container">
    <div class="footer-social-buttons flex-container flex-horizontal-center">
<a href="https://discord.gg/mydiscord" class="discord-button" target="_blank"></a>
    <a href="https://www.instagram.com/myinstagram/" class="instagram-button" target="_blank"></a>
    <a href="https://www.twitter.com/mytwitter" class="twitter-button" target="_blank"></a>
    <a href="https://www.tiktok.com/mytiktok" class="tiktok-button" target="_blank"></a>
     </div>

我不明白为什么 Discord 按钮会显示徽标，但 Tik Tok 按钮不会。如果有人知道，请告诉我我做错了什么。

标签： htmlcssbutton

解决方案

推荐阅读