Pseudo Element und Abstände?

[Liv3pl4y]

Guten Tag,

nach mehreren Versuchen und mangels Erfahrung mit Pseudo Elementen, sowie der Internet-Recherche (vielleicht auch einfach nicht mit dem passenden Suchbegriff) suche ich hier bei euch nun für mein Problem Hilfe.

Ich bin gerade dabei eine Art Tab-Menü zu realisieren. Soweit so gut, allerdings würde ich gerne mittels Webfont (FontAwesome) und dem Pseudo Element ::before Icons vor die Menüeinträge setzen. Das an sich ist auch kein Problem, allerdings liegt das Problem in dem unregelmäßigen Abstand zum Menüeintrag. Ich würde gerne einen gleichmäßigen Abstand bewirken, ohne das die Inline-Elemente (Menüeinträge) individuell verschoben werden. Sondern entgegengesetzt ein gleichmäßiger Abstand entsteht.

Unter folgenden Link kann man das Tabmenü (WIP) aufrufen:

 

[lachender_engel]

Das ist schon alles richtig, wie es ist.
Denn die verwendeten Symbole sind nur unterschiedlich breit. Der Abstand vom Symbol zum Text ist immer gleich. In Word wäre die Lösung "Tabulatoren" zu verwenden. In HTML gibt es so etwas aber nicht ;-)
Daher musst Du Symbole gleicher Breite verwenden oder diese als Grafiken, ebenfalls mit der selben Breite, platzieren.

 

[Liv3pl4y]

Ich verstehe nur nicht, wieso die alle unterschiedlich groß sind. Denn eigentlich:

.site-nav *::before {
    font-family: 'FontAwesome';
    font-size:16px;
    color:#DFDFDF;
    position:relative;
    right: 10px;
}

... definiere ich hier für die Webfonts eine Schriftgröße von 16px. Berücksichtigt die Schriftgröße nicht die Breite des Symbols bei einem Webfont?

 

[lachender_engel]

Ich schreibe nicht sie (die Zeichen) sind unterschiedlich groß sondern unterschiedlich breit. Das hat was mit der Laufweite eines jeden Zeichens zu tun.
Was Du definierst ist die Zeichenhöhe. Die Zeichenbreite ergibt sich aus dem jeweiligen Zeichen.
Ein i ist auch weniger breit als ein X. Wenn Du z.B. XkX schreibst ist das k genau zwischen den x-en. Genau so kannst Du XiX schreiben, und zwischen den Buchstaben ist kein freier Raum, ob wohl das i schmaler ist als das k.
Daher kenne ich für einen solchen Fall nur die Lösung Grafiken mit einer identischen Breite zu verwenden.

 

[Myhar]

@lachender_engel Die Lösung, Grafiken mit identischer Breite zu verwenden ist veraltet*, heutzutage ist die von @Liv3pl4y verwendete Variante die bessere (*svg-Grafiken wären "noch besser", außer man muss noch IE8 unterstützen)
Eine einfache Lösung für das Problem ist, die Icons nicht relativ sondern absolut hinzupositionieren. Dann wird der Text nicht beeinflusst und die Icons sind auch immer gleich positioniert. Auch kann man dann zusätzlich noch eine Breite definieren (display:block nicht vergessen) und das Icon mittels text-align:center in die Mitte des so erzeugten Blocks setzen.
Aber: Warum werden lauter px-Werte verwendet, hier ist es doch besser, mit relativen Werten (em, %) zu arbeiten?

 

[lachender_engel]

Eine einfache Lösung für das Problem ist, die Icons nicht relativ sondern absolut hinzupositionieren. Dann wird der Text nicht beeinflusst und die Icons sind auch immer gleich positioniert.

Nach meinem Verständnis ergibt sich trotzdem ein Problem, wenn die Icon unterschiedliche Breite aufweisen, oder ist das nicht mehr so?!
Dann sind sie alle rechtsbündig, oder?! Aber vielleicht ist das auch gewünscht?!

 

[Myhar]

Dann sind sie alle rechtsbündig, oder?!

Wenn du meinen Beitrag fertig gelesen hättest (oder zumindest noch 2 Sätze weiter) dann hättest du gesehen, dass ich auch hierfür eine Lösung angegeben habe.