Font Awesome bietet zahlreiche Optionen zur Größenanpassung von Symbolen in Ihrem Projekt.
Standardmäßig übernehmen Symbole die Schriftgröße ihres übergeordneten Containers, sodass sie an jeden Text angepasst werden können (wie im Beispiel unten zusehen).
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
<p>
<i class="fa-solid fa-coffee"></i> Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
</p>
Font Awesome bietet eine Reihe von T-Shirt-basierten Größen, die nicht nur die Größe eines Symbols vergrößern oder verkleinern, sondern auch die vertikale Ausrichtung eines Symbols an umgebendem Text und Elementen (z. B. Schaltflächenfüllung) ermöglichen. Dies eignet sich hervorragend zum Vergrößern/Verkleinern eines Symbols, ohne dass die Lesbarkeit und Ausrichtung an UI-Elementen beeinträchtigt wird.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.
<p><i class="fa-solid fa-coffee fa-2xs"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
<p><i class="fa-solid fa-coffee fa-xs"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
<p><i class="fa-solid fa-coffee fa-sm"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
<p><i class="fa-solid fa-coffee"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
<p><i class="fa-solid fa-coffee fa-lg"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
<p><i class="fa-solid fa-coffee fa-xl"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
<p><i class="fa-solid fa-coffee fa-2xl"></i>Wenn mein Wecker um sechs Uhr klingelt, brauche ich eine Kanne guten Kaffee.</p>
Wie bei den Symbolen von Font Awesome wird die relative Größenskala unter Berücksichtigung der standardmäßigen Schriftgröße von 16 Pixeln moderner Browser erstellt und von dort aus schrittweise nach oben/unten angepasst.
| relative Größen Klasse | Schrift Größe | Schrifft Größe in Pixel |
|---|---|---|
| fa-2xs | 0.625em | 10px |
| fa-xs | 0.75em | 12px |
| fa-sm | 0.875em | 14px |
| fa-lg | 1.25em | 20px |
| fa-xl | 1.5em | 24px |
| fa-2xl | 2em | 32px |
Font Awesome bietet eine stufenweise Größenskala, mit der Sie die Größe eines Symbols einfach und effizient von fa-1x bis fa-10x anpassen können. Diese Größenanpassung ist besonders nützlich, um Symbole in verschiedenen Maßstäben darzustellen oder wenn die Textausrichtung weniger wichtig ist.
<i class="fa-solid fa-camera fa-1x"></i>
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-camera fa-3x"></i>
<i class="fa-solid fa-camera fa-4x"></i>
<i class="fa-solid fa-camera fa-5x"></i>
<i class="fa-solid fa-camera fa-6x"></i>
<i class="fa-solid fa-camera fa-7x"></i>
<i class="fa-solid fa-camera fa-8x"></i>
<i class="fa-solid fa-camera fa-9x"></i>
<i class="fa-solid fa-camera fa-10x"></i>
| Stufenweise Größen Klasse | Schrift Größe | Schrifft Größe in Pixel |
|---|---|---|
| fa-1x | 1em | 16px |
| fa-2x | 2em | 32px |
| fa-3x | 3em | 48px |
| fa-4x | 4em | 64px |
| fa-5x | 5em | 80px |
| fa-6x | 6em | 96px |
| fa-7x | 7em | 112px |
| fa-8x | 8em | 128px |
| fa-9x | 9em | 144px |
| fa-10x | 10em | 160px |
Sie können die Größe eines Symbols auch direkt gestalten, indem Sie im CSS Ihres Projekts eine Schriftgröße font-size festlegen, die auf ein Symbol abzielt, oder direkt im Stilattribut style des HTML-Elements, das auf ein Symbol verweist.
Meiner Meinung nach ist es unmenschlich, Menschen, die aus medizinischen Gründen Kaffee brauchen, dazu zu zwingen, in der Schlange hinter Leuten zu warten, die ihn offenbar als eine Art Freizeitbeschäftigung betrachten. Dave Barry
CSS Style
.fa-coffee {
font-size: 80px;
}
Als Stilattribut im HTML-Element <i>
<div style="text-align: center;">
<i class="fas fa-coffee" style="font-size: 80px;"></i>
<h4 style="margin-top: 0.25em;">Kaffee</h4>
<blockquote>Meiner Meinung nach ist es unmenschlich, Menschen, die aus medizinischen Gründen Kaffee brauchen, dazu zu zwingen, in der Schlange hinter Leuten zu warten, die ihn offenbar als eine Art Freizeitbeschäftigung betrachten.</blockquote>
<a href="https://www.washingtonpost.com/archive/lifestyle/magazine/1997/11/09/grounds-for-suspicion/075c7cfe-d5cf-4443-ae42-a95e6e46fed7/" lang="en" target="_blank">Dave Barry</a>
</div>