Wie stelle ich sicher, dass jeder Buchstabe die gleiche Breite hat?

98

Ich habe festgestellt, dass es auch bei gleicher Schriftgröße keine Standardbreite gibt. Wie kann ich diese vor einer Liste von Elementen verwenden, damit die Wörter nicht gezackt erscheinen?

Screenshot des Problems:

Dies ist der Code: 

<ul id="myTab">
    <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li>
    <li><a href="#video"><i class="icon-film"></i> Videos</a></li>
    <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li>
    <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li>
    <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li>
</ul>
font-awesome Jim Hohl - CTO Vidaao
quelle

Antworten:

7

Sind Sie sicher, dass Sie keinen anderen Stil definiert haben, der dies tut?

So sieht Ihr HTML in einer Datei auf einer Site aus, die ich mit Font Awesome verwende:

Beachten Sie, wie die Symbole und der Text ausgerichtet sind. Dies ist Ihr Originalbild mit hinzugefügten Linien:

Es sieht so aus, als hätten Sie irgendwo einen Stil definiert, der das Font Awesome-Styling entfernt.

Sie können auch versuchen, den ursprünglichen Font Awesome-Stil (von font-awesome.css) hinzuzufügen, um zu sehen, ob dies vorübergehend behoben wird:

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}
adrianbanks
quelle
Danke dir. Dies war weder in meiner font-awesome.css noch in der von mir heruntergeladenen Datei ( fortawesome.github.io/Font-Awesome/assets/font-awesome.zip ) oder sogar in der CDN-Version, auf die sie verweisen ( bootstrapcdn.com/). index.html? v = 05162013150137 # tab_fontawesome ). Aber es hat funktioniert. Vielen Dank.
Jim Hohl - CTO Vidaao
2

Es ist einfach und leicht zu skalieren Glyphe oder jedes Symbol mit diesem CSS

> .fa { transform: scale(1.5,1); }
Hasnain Mehmood
quelle