Überlagerte Webfont-Icons

Sie können unsere Icons einfach mit dem Support-Design von Font Awesome kombinieren.

Verwenden Sie zum Stapeln mehrerer Symbole die fa-stack-Klasse a als übergeordnetes Element der 2 Symbole, die Sie stapeln möchten. Fügen Sie dann die fa-stack-1x-Klasse für das Symbol mit der regelmäßigen Größe hinzu und fügen Sie die fa-stack-2x-Klasse für das größere Symbol hinzu. fa-inverse kann zu dem Icon mit dem fa-stack-1x hinzugefügt werden, um mit einem Knock-out Looking-Effekt zu helfen. Sie können sogar größere Symbolklassen auf das übergeordnete Element anwenden, um die Größeneinstellung weiter zu steuern.
Font Awesome


Übungsseite Überlagerte Icons

Überlagerte Icons

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Überlagerte Icons </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Überlagerte Icons</h3>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>
</body>
</html>