Font awesome, gleiches Icon mit unterschiedlicher Breite

Question

Ich habe ein kleines Problem mit Font Awesome icon.

Ich habe 2 gleiche Versionen der Website (für Entwicklung und Tests) und das Symbol wird anders angezeigt, während die gleichen CSS-Stile haben.

beschrieben ich dieses Problem mit diesem Symbol:

.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>

Diese CSS und HTML-Markup auf beiden Entwickler und Test-Versionen platziert, Chrom Entwickler-Tools zeigt gleichen Stile und schwebendes font-awesome-Icon: bevor pseudoelement die Größe ergibt, wie auf dem Bild oben.

Answer 1

Ich glaube, Sie würden besser durch die Verwendung em anstatt px Werte hier ... dann bedient werden Alles passt sich der Schriftgröße an.

Zu Ihrem speziellen Problem gibt es einen Konflikt zwischen line-height/font-size in font-awesome und Ihre spezifischen Stile.

Die obere Polsterung wird wahrscheinlich auch nicht benötigt.

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

Ich glaube, es hat mit der Schriftgröße zu tun. Ich denke, sein weil font-awesome Erklärung

font: normal normal normal 14px/1 FontAwesome; 

hat also die Schriftgröße entfernen oder Ihren font-size mit em anpassen und es sollte als

erwartet, wenn Sie hinzufügen! Wichtig, um Ihre Schrift - Größe: Sie sehen das seltsame Ergebnis, das Sie auf einer Ihrer Websites sehen.

.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>

Oder Sie könnten dies tun

.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>