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

208

Seit 3.1.1 können Sie die icon-fixed-widthKlasse verwenden, anstatt das CSS bearbeiten zu müssen.

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

Seit 4.0 sollten Sie Folgendes verwenden fa-fw:
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web / Styling / Symbole mit fester Breite

Vielen Dank an @kalessin für den Hinweis.

— leesei
quelle

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

2

Verwenden Sie für die Fontawesome-Version über 4.X die fa-fwKlasse im <i>Tag. Ref: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

— Anant Singh
quelle