Bootstrap 导航栏中的 SVG nav-link，跨浏览器

Question

我有一个 Bootstrap 4 导航栏，里面有 nav-links，我希望其中一个 links 显示 SVG 而不是文本。

具体来说，它是 Patreon 的 link，我希望它显示为 Patreon 徽标。

我已经这样做了，这是它在 Chrome 上的显示方式：

这就是我想要的效果。

但在 Firefox 上情况有所不同：

我自己 iPhone4 svg 显示非常非常小，但我猜那是因为我使用的是非常旧的系统 (iOS7)。

这是我的 CSS.

的相关部分

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.patreon-wordmark.svg-icon svg {
    height: 1.6em;
    width: auto;
}

.patreon-wordmark.svg-icon.svg-baseline svg {
    bottom: -0.53em;
    position: absolute;
}

对于其他地方的其他 svg，我也有这段代码（我想我会把它放在这里以防它以某种方式干扰其余部分）：

.svg-icon {
    display: inline-flex;
    align-self: center;
    position: relative;
    height: 1em;
    width: 1em;
}
.svg-icon svg {
    height:1em;
    width:1em;
}
.svg-icon.svg-baseline svg {
    bottom: -0.125em;
    position: absolute;
}

我的 SVG 是内联的并且包含如下：

<li class="nav-item">
    <a class="nav-link patreon-wordmark svg-icon svg-baseline" href="link">
        <svg ...

如何使它们在所有浏览器中对齐？还是我处理问题的方式不对？

Answer 1

我终于找到了解决办法。我走了一条不同的路。

HTML:

<li class="nav-item">
    <a class="nav-link navbar-patreon-svg" href="http://www.patreon.com/antoineguenet">
        <span class="text-hide" >Patreon</span>
    </a>
</li>

CSS:

.navbar-patreon-svg {
    background-color: rgba(0,0,0,.5);
    mask: url(../images/patreon-wordmark-black.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-origin: content-box;
    -webkit-mask: url(../images/patreon-wordmark-black.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-origin: content-box;

    min-width: 7em;
}

最后，让 svg 像其他链接一样在悬停时改变颜色：

.navbar-patreon-svg:hover {
    background-color: rgba(0,0,0,.7);
}

Bootstrap 导航栏中的 SVG nav-link，跨浏览器

SVG nav-link in a Bootstrap navbar, cross-browser

css

svg

cross-browser

bootstrap-4