Hilfe:Icons einbinden: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
(Die Seite wurde neu angelegt: „Auf den Seiten von ZUM Unterrichten lassen sich zwei Icon-Sets einbinden. Zum einen [https://fontawesome.com/v4.7.0/icons/ FontAwesome] (Version 4) und zum and…“) Markierung: 2017-Quelltext-Bearbeitung |
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 21: | Zeile 21: | ||
<pre> | <pre> | ||
<span class="fa fa-rocket fa-lg"></span> fa-lg | <span class="fa fa-rocket fa-lg"></span> fa-lg | ||
<span class="fa fa-rocket fa-2x"></span> fa-2x | <span class="fa fa-rocket fa-2x"></span> fa-2x | ||
<span class="fa fa-rocket fa-3x"></span> fa-3x | <span class="fa fa-rocket fa-3x"></span> fa-3x | ||
<span class="fa fa-rocket fa-4x"></span> fa-4x | <span class="fa fa-rocket fa-4x"></span> fa-4x | ||
<span class="fa fa-rocket fa-5x"></span> fa-5x | <span class="fa fa-rocket fa-5x"></span> fa-5x | ||
</pre> | </pre> | ||
<span class="fa fa-rocket fa-lg"></span> fa-lg | <span class="fa fa-rocket fa-lg"></span> fa-lg | ||
<span class="fa fa-rocket fa-2x"></span> fa-2x | <span class="fa fa-rocket fa-2x"></span> fa-2x | ||
<span class="fa fa-rocket fa-3x"></span> fa-3x | <span class="fa fa-rocket fa-3x"></span> fa-3x | ||
<span class="fa fa-rocket fa-4x"></span> fa-4x | <span class="fa fa-rocket fa-4x"></span> fa-4x | ||
<span class="fa fa-rocket fa-5x"></span> fa-5x | <span class="fa fa-rocket fa-5x"></span> fa-5x | ||
Version vom 4. September 2018, 11:26 Uhr
Auf den Seiten von ZUM Unterrichten lassen sich zwei Icon-Sets einbinden. Zum einen FontAwesome (Version 4) und zum anderen Brainy Icons.
Beide Icon-Sets passen sich der Textgröße und Textfarbe des Elternelement an.
Font Awesome
Font Awesome Icns werden wird folgt eingebunden:
<span class="fa fa-rocket"></span>
Zu sehen ist Folgendes:
Um große Icons anzuzeigen, gibt es die Option die Zoomklassen fa-lg (33% vergrößert), fa-2x, fa-3x, fa-4x, oder fa-5x hinzuzufügen:
<span class="fa fa-rocket fa-lg"></span> fa-lg <span class="fa fa-rocket fa-2x"></span> fa-2x <span class="fa fa-rocket fa-3x"></span> fa-3x <span class="fa fa-rocket fa-4x"></span> fa-4x <span class="fa fa-rocket fa-5x"></span> fa-5x
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
