Hilfe:Icons

Hilfen im Grundschullernportal

Hilfeseiten zu den Vorlagen

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

Multimedia

• Einbinden von Medien (Youtube, Geogebra, etc.)
• Interaktive Übungen (Learning Apps, H5P, R-Quizze)
  • R-Quiz
• Links als Buttons anzeigen
• Fachbezogene Vorlagen (Sicherheitsinfos, etc.)

Hilfeseiten

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

Auf den Seiten des Grundschullernportals 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

Eine Übersicht über alle Font Awesome Icons findet sich auf der offiziellen Font-Awesome-Seite. Dort werden außerdem weitere Formatierungsmöglichkeiten vorgestellt.

Font Awesome Icons werden wird folgt eingebunden:

Das schreibt man:

<span class="fa fa-rocket"></span>

Das sieht man:

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:

Das schreibt man:

<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

Das sieht man:

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

Auf der offiziellen Seite der Brainy Icons findet sich eine [über alle Brainy Icons]. Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons (s.o.):

Das schreibt man:

<span class="brainy hdg-space-shuttle"></span>

Das sieht man:

Auch bei den Brainy Icons können die oben genannten Größenklassen verwendet werden, also z.B.

Das schreibt man:

<span class="brainy hdg-space-shuttle fa-5x"></span>

Das sieht man:

Icons in Links

Die Icons können auch in Links eingebunden werden:

Das schreibt man:

[[Hauptseite|<span class="fa fa-rocket></span> Hauptseite]]
[[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]]

Das sieht man:

Hauptseite

Hauptseite