字體真棒堆疊平方和鄰不對齊

我已經試過兩種方式，但兩者都是醜陋的。問題是fa-square和fa-square-o是不同的大小，所以當你堆疊他們時，他們不排隊！

<span class="fa fa-stack"> 
    <i class="fa fa-square fa-stack-1x"></i> 
    <i class="fa fa-plus-square fa-stack-1x fa-inverse"></i> 
    <i class="fa fa-square-o fa-stack-1x"></i> 
</span> 

<span class="fa fa-stack"> 
    <i class="fa fa-square fa-stack-1x fa-inverse"></i> 
    <i class="fa fa-plus-square-o fa-stack-1x"></i> 
</span>

結果是

我試圖縮小在使用CSS fa-square 86％。但是，這非常脆弱，因爲它取決於瀏覽器和縮放設置。我希望解決方案在多種縮放級別上都能在Chrome和IE11上看起來不錯。

來源

2017-04-12 John Henckel

這是報道[GitHub的問題5156]（https://github.com/FortAwesome/Font-Awesome/issues/5156），我看沒有很好的解決辦法 –

這可能有幫助。

body { 
 
    background-color: tan; 
 
    font-size: 100px; 
 
} 
 

 
.fix:before { 
 
\t background: #000; 
 
\t border-radius: 20%; 
 
\t padding: 1% 5%; 
 
} 
 

 
.fix-2:before { 
 
\t background: #000; 
 
\t border-radius: 20%; 
 
\t padding: 1% 10%; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="fa fa-stack"> 
 
    <i class="fa fa-square fa-stack-1x fix"></i> 
 
    <i class="fa fa-plus-square fa-stack-1x fa-inverse"></i> 
 
</span> 
 

 
<!-- Without Stacking --> 
 
<i class="fa fa-plus-square fa-inverse fix-2"></i>

來源

2017-07-14 12:09:38

這是輝煌！！它似乎可以在IE和Chrome上運行。謝謝！！ –

不幸的是，如果你想使用Font-Awesome的圖標，你將不得不通過製作新一代fa-square以及所有衍生產品（rss-square，...）來標準化圖標的大小。

開發人員不再接受圖標的拉取請求，因此在接受圖標前可能需要很長時間。（正如雨果M.所說，這是一個已知的bug）

的解決辦法我看到：

基礎上的字體創建您自己的圖標（見本post），覆蓋方形的Unicode（f0c8）或獲得另一個免費的。（並在github中推送你的解決方案）。它是通用的，你可以動態改變顏色，但需要很長時間。
或者只是爲您的項目製作圖片（SVG或其他），它很快但不太可塑。

來源

2017-07-12 12:25:03

字體真棒堆疊平方和鄰不對齊

回答

相關問題