Hilfe:Icons einbinden

Hilfen in "ZUM Deutsch Lernen": Vorlagen, allgemeine Hilfeseiten

Hilfeseiten zu den Vorlagen

• Boxen
• Farben
• Mehrspaltenlayout
• Icons
• Vorlagen für Lernpfade
  • Navigation
  • Verstecken
  • Fortsetzung

Multimedia

• Einbinden von Medien (Bilder, Youtube, Geogebra, etc.)
• Einbinden von externen Tools (Mentimeter, Padlet, Quizlet, AnswerGarden)
• Interaktive Übungen einbinden oder erstellen
  • Learning Apps
  • H5P
  • R-Quiz
• Links als Buttons anzeigen

Hilfeseiten

• Erste Schritte
• Inhaltliche Richtlinien
• Wartung und Pflege
• Kategorien
• Hilfe zum Zitieren

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.

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

Hauptseite

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.

• Übersicht über alle Font Awesome Icons
• Weitere Formatierungsmöglichkeiten