Tipps für die Ausrichtung von Icons zu Text

Icons. Sie sind beliebt. Sie helfen, Inhalte zu ergänzen (meistens). Und doch können sie eine Qual sein.

Sobald Sie sich für ein Format entschieden haben (SVG oder Icon-Schriftart?) und die Sammlung entworfen haben, gibt es immer noch weitere Überlegungen, von denen viele beim Codieren auftauchen.

Hier ist eine ausgezeichnete Frage, die oft in diese Richtung gestellt wird:

@chriscoyier #smashingconf Empfehlungen, wie man #svg Icons am Text ausrichtet?

— Andreas Sahle (@pixelmord) 20. Oktober 2015

Schwierig, oder? Das Ausrichten von Icons kann eine knifflige Aufgabe sein, besonders wenn Sie nicht derjenige sind, der für das Design der Icons zuständig ist. Ich muss ehrlich sein und sagen, dass ich dachte, dies wäre eine einfache Frage, die man in einem Tweet beantworten könnte. Doch es steckt viel mehr dahinter, die perfekte Ausrichtung zwischen Icons und Text zu finden.

Glücklicherweise gibt es ein paar universelle Tipps, die wir anwenden können, um sicherzustellen, dass unsere Icons immer perfekt zum Text passen.

Tipp 1: Entscheiden Sie sich für ein Icon-Format und bleiben Sie dabei

Ich gehe davon aus, dass es neben SVG noch andere Wege gibt, Icons zu erstellen. Tatsächlich gibt es ziemlich viele Methoden, wenn man auch die berücksichtigt, die man als altmodisch bezeichnen könnte, im Sinne von „Das ist ja sooo 2011!“ Ein paar Beispiele

• SVG-Icons
• Icon-Schriftarten
• CSS-Bild-Sprites
• Inline-Bilder

Unabhängig von Ihrer Präferenz (hüstel, SVG, hüstel!) wird das Format Ihrer Icons maßgeblich beeinflussen, wie Sie sie am Text ausrichten. Nehmen wir an, alle Ihre Icons sind in einem Sprite enthalten. Das bedeutet, dass die Icons ziemlich feste Abmessungen haben (es sei denn, Sie beginnen groß und verwenden background-size zum Skalieren), und es wäre viel einfacher, die Größe und line-height Ihres Inhalts an die Ihrer Icons anzupassen.

Die Schönheit von Dingen wie SVG liegt darin, dass es von Natur aus skalierbar ist und Ihnen die Möglichkeit gibt, sich mehr auf CSS zu verlassen, um Dinge auszurichten, anstatt auf den Designprozess.

Die Lektion hier: Wählen Sie ein Format für alle Icons und nutzen Sie dieses als Grundlage für Ihre Herangehensweise an die Ausrichtung an den Text. Ihr Code wird viel besser wartbar sein und Ihr Designer (oder Ihr innerer Designer) wird es Ihnen danken.

Tipp 2: Verwenden Sie ähnlich große Icons

Hier ist eine ideale Situation: Alle Icons sind exakt gleich groß. Nehmen wir an, alle Icons einer Sammlung sind 100px quadratisch. Das gibt uns genau vor, wie viel Platz wir haben, und macht die Ausrichtung zum Kinderspiel.

Wir wissen auch, dass das nicht immer eine praktikable Regel ist. Icons können je nach dem, was wir kommunizieren wollen, unterschiedlich viel Platz einnehmen.

Das Karten-Icon ist schmaler als das Avatar-Icon, das schmaler ist als das Warenkorb-Icon. Wenn Sie wie ich sind, werden Sie den weißen Raum um ein Icon herum entfernen, um die kleinste mögliche Dateigröße zu gewährleisten. Das ist großartig, aber jetzt haben wir Icons mit unterschiedlichen Abmessungen. Das ist in Ordnung, wenn wir mit SVG arbeiten, aber weniger wünschenswert für nicht-vektorielle Formate wie PNG. Wir können SVG anweisen, einen festen Platz einzunehmen, ohne Auflösung zu verlieren, aber Nicht-Vektoren werden das Bild dehnen und verzerren, wenn wir mit inkonsistenten Abmessungen arbeiten.

Das Richtige hier ist, Ihre Icon-Designspezifikationen an das verwendete Format anzupassen. Wenn Sie SVG verwenden, kann das Icon jede Größe haben, aber versuchen Sie, ein gleichmäßig großes Zeichenbrett in Illustrator (oder Ihrem bevorzugten Design-Tool) zu verwenden. Dies hilft, zukünftige Icons der Sammlung im gleichen Maßstab zu halten.

Wenn Sie nicht-vektoriell arbeiten, verwenden Sie immer die gleichen Abmessungen. Die Icons können sich darin unterscheiden, wie viel Platz sie einnehmen, aber es stellt sicher, dass Ihre Icons immer scharf und proportional sind, unabhängig vom danebenstehenden Text.

Tipp 3: Passen Sie Ihre Schriftgröße an die Größe des Icon-Sets an

Icons sollten ähnlich wie Typografie behandelt werden. Sie werden entweder in Verbindung mit Text oder anstelle von Text verwendet, daher ist es aus demselben Grund, warum wir gleichbleibende Schriftgrößen mögen, wichtig, die Größe des Icons an die Größe des danebenstehenden Textes anzupassen: Lesbarkeit.

Das bedeutet nicht, dass Icons 16px groß sein müssen, wenn Ihre Inhalts-Schriftgröße ebenfalls 16px beträgt. Es bedeutet, dass Sie sich der Schriftgröße bewusst sind und sicherstellen, dass Ihre Icons sie schön ergänzen, egal ob sie größer, gleich groß oder kleiner als der Text sind.

Hier ist eine Illustration des Unterschieds zwischen einem Icon, das schön an die Größe des Inhalts angepasst wurde, und einem, das nicht angepasst wurde.

Siehe den Pen MyxBrQ von CSS-Tricks (@css-tricks) auf CodePen.

Das Beispiel links ist konsistenter mit der Inhalts-Schriftgröße und hat eine bessere Ausrichtung als das rechte, obwohl beide Beispiele technisch gesehen ausgerichtet sind.

Tipp 4: Verwenden Sie CSS, um das Erscheinungsbild fein abzustimmen

Wenn alles gesagt und getan ist, gibt es ein solides und einfaches Rezept, um Icons genau dort zu platzieren, wo Sie sie mit Text ausrichten möchten.

.icon {
  position: relative;
  /* Adjust these values accordingly */
  top: 5px;
  left: 5px;
}

Das ist der Unterschied zwischen Icons, die perfekt am Text ausgerichtet aussehen, und Icons, die leicht daneben aussehen.

Siehe den Pen YqBdxx von CSS-Tricks (@css-tricks) auf CodePen.

Tipp 5: Verwenden Sie Klassennamen für spezifische Icons

Das obige Beispiel ist großartig, aber Sie haben vielleicht bemerkt, dass das Standort-Icon so verdammt schmal aussieht und noch weiter vom Text entfernt ist als die Musiknote. Wie ärgerlich!

Hier kann CSS pro Icon helfen.

<ul>
  <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> Weezer</li>
  <li><svg class="icon-location"><use xlink:href="#icon-location"></use></svg> Santa Monica</li>
  <li><svg class="icon-music"><use xlink:href="#icon-music"></use></svg> Discography</li>
  <li><svg class="icon-sphere"><use xlink:href="#icon-sphere"></use></svg> weezer.com</li>
  <li><svg class="icon-cart"><use xlink:href="#icon-cart"></use></svg> Artist Store</li>
</ul>

/* Match any class name that starts with icon */
[class^="icon"] {
  width: 50px;
  height: 50px;
  position: relative;
  top: 15px;
  margin-right: 10px;
  fill: #fff;
}

/* Reposition the music note icon */
.icon-music {
  right: 5px;
}

Puh, das ist schon viel besser!

Siehe den Pen QNoBVq von CSS-Tricks (@css-tricks) auf CodePen.

Zusammenfassend

Wenn die Ausrichtung von Icons am Text doch mehr erfordert, als Sie erwartet haben, sind Sie nicht allein. Die einfache Antwort ist, dass es wirklich davon abhängt, welche Methode Sie zur Erstellung der Icons wählen. Die CSS ist von da an ziemlich unkompliziert.

Die Antwort auf diese Frage bezog sich nur auf Text, aber es gibt andere Elemente, bei denen die Ausrichtung von Icons eine Rolle spielt, wie z. B. Buttons, Formularfelder, Navigation und wahrscheinlich noch viele andere Dinge. Ich meine, was ist mit responsiven Designs, richtig?! Unabhängig vom Szenario stelle ich fest, dass mir die fünf hier besprochenen Tipps aus der Patsche helfen.