SVG nav-link in Bootstrap navbar、クロスブラウザ

Question

私は、nav-linksを持つBootstrap 4 navbarを持っています。これらのリンクの1つに、テキストの代わりにSVGを表示したいと思います。

具体的には、Patreonへのリンクであり、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); 
}