Hilfe:Icons einbinden: Unterschied zwischen den Versionen
K (→Font Awesome) Markierung: 2017-Quelltext-Bearbeitung |
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 1: | Zeile 1: | ||
{{Hilfe Navigation}} | |||
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 anderen [http://handdrawngoods.com/store/brainy-icons-280-hand-drawn-science-and-education-icons/ Brainy Icons]. | 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 anderen [http://handdrawngoods.com/store/brainy-icons-280-hand-drawn-science-and-education-icons/ Brainy Icons]. | ||
| Zeile 80: | Zeile 81: | ||
</pre> | </pre> | ||
[[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 3. November 2018, 08:59 Uhr
- Einstieg
Inhalte erstellen
Erste Schritte, Seiten anlegen, Links anlegen
Anforderungen an Seiten im ZUM-Unterrichten
Mindestumfang, gewünschte Artikel, Kategorien, Didaktik
Medien einbinden
Bilder, Videos, Geogebra, ZUMPad, etc., Lizenzen
Interaktive Übungen einbinden
H5P, Learningapps, R-Quiz
- Vorlagen
Lernpfade
Navigation, Lösung verstecken, Unterseiten
Kästen
Kästen für verschiedene Anwendungsfälle
Überblick
Überblick über weitere Hilfen
- Wartung und Pflege
Wartung und Pflege
Spezialseiten, unbenutzte Kategorien, gesuchte Seiten
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 <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.
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:
Auch bei den Brainy Icons können die oben genannten Größenklassen verwendet werden, also z.B.
<span class="brainy hdg-space-shuttle fa-5x"></span>
für ein großes Icon:
Übersicht über alle Brainy Icons
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]]
