Hilfe:Icons einbinden: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
Markierung: 2017-Quelltext-Bearbeitung
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
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].


Beide Icon-Sets passen sich der Textgröße und Textfarbe des Elternelement an.
Beide Icon-Sets passen sich der Textgröße und Textfarbe des Elternelements an.


__TOC__
__TOC__
== Brainy Icons ==


== Font Awesome ==
Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons (s. u.):
 
Font Awesome Icns werden wird folgt eingebunden:


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


Zu sehen ist Folgendes:
Zu sehen ist Folgendes:


<span class="fa fa-rocket"></span>
<span class="brainy hdg-space-shuttle"></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:
Auch bei den Brainy Icons können die oben genannten Größenklassen verwendet werden, also z. B.:  


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


<span class="fa fa-rocket fa-2x"></span> fa-2x
für ein großes Icon:


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


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


<span class="fa fa-rocket fa-5x"></span> fa-5x
[[Hilfe:Icons_einbinden/Brainy_Icons|Übersicht über alle Brainy Icons]]
</pre>


<span class="fa fa-rocket fa-lg"></span> fa-lg
== Icons in Links ==


<span class="fa fa-rocket fa-2x"></span> fa-2x
Die Icons können auch in Links eingebunden werden:


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


<span class="fa fa-rocket fa-4x"></span> fa-4x
[[Hauptseite|<span class="fa fa-rocket"></span> Hauptseite]]


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


'''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.
== Font Awesome ==
 
* [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 ==
Font Awesome Icons werden wird folgt eingebunden:
 
Bei den Brainy Icons handelt es sich um handgezeichnete Icons. Sie sind im Prinzip genauso einzubinden wie die Font Awesome Icons:


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


Zu sehen ist Folgendes:
Zu sehen ist Folgendes:


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


Auch bei den Brainy Icons können die oben genannten Größenklassen verwendet werden, also z.B.
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>
<span class="brainy hdg-space-shuttle fa-5x"></span>
<span class="fa fa-rocket fa-lg"></span> fa-lg
</pre>
 
<span class="fa fa-rocket fa-2x"></span> fa-2x


für ein großes Icon:
<span class="fa fa-rocket fa-3x"></span> fa-3x


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


<span class="fa fa-rocket fa-5x"></span> fa-5x
</pre>


[[Hilfe:Icons_einbinden/Brainy_Icons|Übersicht über alle Brainy Icons]]
<span class="fa fa-rocket fa-lg"></span> fa-lg
 
<span class="fa fa-rocket fa-2x"></span> fa-2x


== Icons in Links ==
<span class="fa fa-rocket fa-3x"></span> fa-3x


Die Icons können auch in Links eingebunden werden:
<span class="fa fa-rocket fa-4x"></span> fa-4x


<pre>
<span class="fa fa-rocket fa-5x"></span> fa-5x
[[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]]
'''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.


[[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]]
* [https://fontawesome.com/v4.7.0/icons/ Übersicht über alle Font Awesome Icons]
* [https://fontawesome.com/v4.7.0/examples/ Weitere Formatierungsmöglichkeiten]

Version vom 24. April 2020, 13:26 Uhr

Hilfen im ZUM-Unterrichten: Vorlagen, allgemeine Hilfeseiten

Einstieg

  1. Inhalte erstellen
    • neue Seiten anlegen
    • Texte einfügen
    • Überschriften
  2. Medien einbinden
  3. Lernpfad erstellen
    • Unterseiten
    • Fortsetzung

Vorlagen

Wartung und Pflege

neuen Platz finden

allgemeine Wiki-Hilfe

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

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.

Abgerufen von „https://unterrichten.zum.de/index.php?title=Hilfe:Icons_einbinden&oldid=112848“