Größenanpassung

Symbole erben die Schriftgröße ihres übergeordneten Containers, sodass sie mit jedem Text übereinstimmen können, den Sie verwenden. Mit den folgenden Klassen können wir die Größe von Symbolen relativ zu der ererbten Schriftgröße vergrößern oder verkleinern.
Font Awesome


Übersicht Größen Klasse

Klasse Größe Beispielcode gerändert
fa-xs .75em <i class="fas fa-stroopwafel fa-xs">
fa-sm .875em <i class="fas fa-stroopwafel fa-sm"></i>
fa-lg 1.33em <i class="fas fa-stroopwafel fa-lg"></i>
fa-2x 2em <i class="fas fa-stroopwafel fa-2x"></i>
fa-3x 3em <i class="fas fa-stroopwafel fa-3x"></i>
fa-4x 4em <i class="fas fa-stroopwafel fa-4x"></i>
fa-5x 5em <i class="fas fa-stroopwafel fa-5x"></i>
fa-6x 6em <i class="fas fa-stroopwafel fa-6x"></i>
fa-7x 7em <i class="fas fa-stroopwafel fa-7x"></i>
fa-8x 8em <i class="fas fa-stroopwafel fa-8x"></i>
fa-9x 9em <i class="fas fa-stroopwafel fa-9x"></i>
fa-10x 10em <i class="fas fa-stroopwafel fa-10x"></i>
Die oben in der Tabelle angegebenen Größen der Klassen werden in der CSS Datei vordefiniert. In einer eigenen CSS Datei können diese vordefinierten Größen aber überschrieben und erweitert werden.

Übungsseite ohne vorgegebener Schriften Größe

Größen Klasse

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Größen Klasse </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Größen Klasse ohne vorgegebene Schriftengröße</h3>
<i class="fas fa-stroopwafel fa-xs"></i>
<i class="fas fa-stroopwafel fa-sm"></i>
<i class="fas fa-stroopwafel fa-lg"></i>
<i class="fas fa-stroopwafel fa-2x"></i>
<i class="fas fa-stroopwafel fa-3x"></i>
<i class="fas fa-stroopwafel fa-4x"></i>
<i class="fas fa-stroopwafel fa-5x"></i>
<i class="fas fa-stroopwafel fa-6x"></i>
<i class="fas fa-stroopwafel fa-7x"></i>
<i class="fas fa-stroopwafel fa-8x"></i>
<i class="fas fa-stroopwafel fa-9x"></i>
<i class="fas fa-stroopwafel fa-10x"></i>
</body>
</html>


Übungsseite mit vorgegebener Schriften Größe 12px

Größen Klasse

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Größen Klasse </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Größen Klasse mit vorgegebene Schriftengröße 12px</h3>
<div style="font-size: 12px;">
<i class="fas fa-stroopwafel fa-xs"></i>
<i class="fas fa-stroopwafel fa-sm"></i>
<i class="fas fa-stroopwafel fa-lg"></i>
<i class="fas fa-stroopwafel fa-2x"></i>
<i class="fas fa-stroopwafel fa-3x"></i>
<i class="fas fa-stroopwafel fa-4x"></i>
<i class="fas fa-stroopwafel fa-5x"></i>
<i class="fas fa-stroopwafel fa-6x"></i>
<i class="fas fa-stroopwafel fa-7x"></i>
<i class="fas fa-stroopwafel fa-8x"></i>
<i class="fas fa-stroopwafel fa-9x"></i>
<i class="fas fa-stroopwafel fa-10x"></i>
</div>
</body>
</html>


Größen Klasse mit eigenem CSS überschreiben

Größen Klasse

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Größen Klasse überschreiben</title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
<!-- ###### eigne größen klasse ###### -->
<style>
.fa-xs {
font-size: 5em;
}
</style>
</head>
<body>
<h3>überschriebene Größen Klasse</h3>
<i class="fas fa-stroopwafel fa-xs"> orginal Größe: 0.75em</i>
</body>
</html>