Hilfe:Icons einbinden: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
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 oder
-Tag zu verwenden.

Brainy 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]]

Hauptseite

Hauptseite