Hilfe:Icons einbinden: Unterschied zwischen den Versionen
Markierung: 2017-Quelltext-Bearbeitung |
(Navigation nach unten) Markierung: 2017-Quelltext-Bearbeitung |
||
| (4 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
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]. | ||
Beide Icon-Sets passen sich der Textgröße und Textfarbe des | Beide Icon-Sets passen sich der Textgröße und Textfarbe des Elternelements an. | ||
__TOC__ | __TOC__ | ||
== Brainy Icons == | |||
Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons (s. u.): | |||
<pre> | |||
<span class="brainy hdg-space-shuttle"></span> | |||
</pre> | |||
Zu sehen ist Folgendes: | |||
<span class="brainy hdg-space-shuttle"></span> | |||
Auch bei den Brainy Icons können die oben genannten Größenklassen verwendet werden, also z. B.: | |||
<pre> | |||
<span class="brainy hdg-space-shuttle fa-5x"></span> | |||
</pre> | |||
für ein großes Icon: | |||
<span class="brainy hdg-space-shuttle fa-5x"></span> | |||
[[Hilfe:Icons_einbinden/Brainy_Icons|Übersicht über alle Brainy Icons]] | |||
== Icons in Links == | |||
Die Icons können auch in Links eingebunden werden: | |||
<pre> | |||
[[Hauptseite|<span class="fa fa-rocket></span> Hauptseite]] | |||
[[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]] | |||
</pre> | |||
[[Hauptseite|<span class="fa fa-rocket"></span> Hauptseite]] | |||
[[Hauptseite|<span class="brainy hdg-space-shuttle"></span> Hauptseite]] | |||
== Font Awesome == | == Font Awesome == | ||
Font Awesome | Font Awesome Icons werden wird folgt eingebunden: | ||
<pre> | <pre> | ||
| Zeile 17: | Zeile 54: | ||
<span class="fa fa-rocket"></span> | <span class="fa fa-rocket"></span> | ||
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: | 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: | ||
<pre> | <pre> | ||
| Zeile 41: | Zeile 78: | ||
<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 <nowiki><i></nowiki>-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. | '''Wichtig:''' Anders als auf den Beispielseiten von Font Awesome dürfen die Icons nicht in einem <nowiki><i></nowiki>-Tag verwendet werden, da dieser im Wiki für kursive Schrift verwendet wird. Am besten sind sie in einem <nowiki><span></nowiki> oder <nowiki><div></nowiki>-Tag zu verwenden. | ||
* [https://fontawesome.com/v4.7.0/icons/ Übersicht über alle Font Awesome Icons] | * [https://fontawesome.com/v4.7.0/icons/ Übersicht über alle Font Awesome Icons] | ||
* [https://fontawesome.com/v4.7.0/examples/ Weitere Formatierungsmöglichkeiten] | * [https://fontawesome.com/v4.7.0/examples/ Weitere Formatierungsmöglichkeiten] | ||
{{Hilfe Navigation}} | |||
Aktuelle Version vom 22. Mai 2022, 06:49 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 Elternelements an.
Brainy Icons
Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons (s. u.):
<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]]
Font Awesome
Font Awesome Icons 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.
- 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
