フォント幅が違う素晴らしいアイコン

Question

フォントAwesomeアイコンに少し問題があります。

2つの同じバージョンのWebサイト（開発用とテスト用）があり、同じCSSスタイルを使用している間にアイコンの表示が異なります。

私はこのアイコンで、この問題を説明します。同じスタイルを表示し、このCSSとHTMLマークアップは、DEVとテスト版の両方の上に置かれ

.btnFilter { 
 
    color: #666666; 
 
    padding-top: 4px; 
 
    font-size: 18px; 
 
    text-align: center; 
 
} 
 
.circle { 
 
    border: solid #999 1px; 
 
    border-radius: 13px; 
 
    box-sizing: border-box; 
 
    width: 26px; 
 
    height: 26px; 
 
    text-align: center; 
 
    font-size: 18px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<i class="fa fa-times circle btnFilter"></i>

をクロームのdevのツール、そしてホバリングフォント - すばらしいアイコン：擬似要素のサイズの前に、上の画像のように結果が得られます。

Answer 1

を行うことができ、私はあなたがより良い、むしろここpx値よりもemを使用することによって提供されるだろうと思います...すべてがフォントサイズに合わせて調整されます。

特定の問題に関しては、line-height/font-sizeとfont-awesomeとの間に衝突があります。

トップパッディングもおそらく必要ありません。

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.btnFilter { 
 
    color: #666666; 
 
    font-size: 160px !important; 
 
    /* for demo only */ 
 
    line-height: 1em; 
 
    text-align: center; 
 
} 
 
.fa::before { 
 
    line-height: inherit; 
 
} 
 
.circle { 
 
    border: solid #999 1px; 
 
    border-radius: 50%; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<i class="fa fa-times circle btnFilter"></i>

Codepen Demo

Answer 2

私はそれがfont-sizeと関係があると信じています。私が考えるそのフォント素晴らしいが

font: normal normal normal 14px/1 FontAwesome; 

の宣言を持っているので、だから、フォントサイズを削除するか、EMを使用してフォントサイズを調整し、それはあなたが追加した場合

を期待通りに動作するはずです！あなたのフォントに重要あなたのサイトの1つに表示される奇妙な結果が表示されます。その後、

.btnFilter { 
 
    color: #666666; 
 
    padding-top: 4px; 
 
    font-size: 18px !important; 
 
    text-align: center; 
 
} 
 
.circle { 
 
    border: solid #999 1px; 
 
    border-radius: 13px; 
 
    box-sizing: border-box; 
 
    width: 26px; 
 
    height: 26px; 
 
    text-align: center; 
 
    font-size: 18px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<i class="fa fa-times circle btnFilter"></i>

それとも、この

.circle{ 
 
    width:18px; 
 
    height:18px; 
 
    padding: 3px; 
 
    background-color:white; 
 
    border-radius:100%; 
 
    line-height:18px; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    display:inline-block; 
 
    border: solid #999 1px; 
 
} 
 

 
.btnFilter { 
 
    line-height: inherit; 
 
    font-size: 18px; 
 
    color: #666666; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="circle"> 
 
    <i class="fa fa-times btnFilter"></i> 
 
</div>