Hilfe:Icons einbinden: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
Zeile 40: | Zeile 40: | ||
<span class="fa fa-rocket fa-5x"></span> fa-5x | <span class="fa fa-rocket fa-5x"></span> fa-5x | ||
'''Wichtig:''' Anders als auf den Beispielseiten von Font Awesome dürfen die Icons nicht in einem <i>-Tag verwendet werden, da dieser im Wiki für kursive Schrift verwendet wird. Am besten sind sie in einem <span> oder <div>-Tag zu verwenden. | |||
* [https://fontawesome.com/v4.7.0/icons/ Übersicht über alle Font Awesome Icons] | |||
* [https://fontawesome.com/v4.7.0/examples/ Weitere Formatierungsmöglichkeiten] | |||
== Brainy Icons == | |||
Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons: | |||
<pre> | |||
<span class="brainy hdg-space-shuttle"></span> | |||
</pre> | |||
Zu sehen ist Folgendes: | |||
<span class="brainy hdg-space-shuttle"></span> | |||
* [[Icons_einbinden/Brainy_Icons|Übersicht über alle Brainy Icons]] | |||
== Icons in Links == | |||
Die Icons können auch in Links eingebunden werden: | Die Icons können auch in Links eingebunden werden: | ||
Zeile 49: | Zeile 71: | ||
[[Hauptseite|<span class="fa fa-rocket></span> Hauptseite]] | [[Hauptseite|<span class="fa fa-rocket></span> Hauptseite]] | ||
[[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]] | [[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]] |
Version vom 4. September 2018, 11:43 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
Wichtig: Anders als auf den Beispielseiten von Font Awesome dürfen die Icons nicht in einem
-Tag verwendet werden, da dieser im Wiki für kursive Schrift verwendet wird. Am besten sind sie in einem oderBrainy Icons
Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons:
<span class="brainy hdg-space-shuttle"></span>
Zu sehen ist Folgendes:
Icons in Links
Die Icons können auch in Links eingebunden werden:
[[Hauptseite|<span class="fa fa-rocket></span> Hauptseite]] [[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]]