Hilfe:Icons: Unterschied zwischen den Versionen

Aus ZUM Grundschullernportal
(angelegt)
Markierung: 2017-Quelltext-Bearbeitung
 
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Hilfe Navigation}}
{{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 des Grundschullernportals 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 Elternelement an.


__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==
Eine [https://fontawesome.com/v4.7.0/icons/ Übersicht über alle Font Awesome Icons] findet sich auf der offiziellen Font-Awesome-Seite. Dort werden außerdem [https://fontawesome.com/v4.7.0/examples/ weitere Formatierungsmöglichkeiten] vorgestellt.


Font Awesome Icons werden wird folgt eingebunden:
Font Awesome Icons werden wird folgt eingebunden:


<div class="grid">
<div class="width-1-2">
'''Das schreibt man:'''
<pre>
<pre>
<span class="fa fa-rocket"></span>
<span class="fa fa-rocket"></span>
</pre>
</pre>
 
</div>
Zu sehen ist Folgendes:
<div class="width-1-2">
'''Das sieht man:'''


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


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:


<div class="grid">
<div class="width-1-2">
'''Das schreibt man:'''
<pre>
<pre>
<span class="fa fa-rocket fa-lg"></span> fa-lg
<span class="fa fa-rocket fa-lg"></span> fa-lg
Zeile 67: Zeile 39:
<span class="fa fa-rocket fa-5x"></span> fa-5x
<span class="fa fa-rocket fa-5x"></span> fa-5x
</pre>
</pre>
</div>
<div class="width-1-2">
'''Das sieht man:'''


<span class="fa fa-rocket fa-lg"></span> fa-lg
<span class="fa fa-rocket fa-lg"></span> fa-lg
Zeile 77: Zeile 53:


<span class="fa fa-rocket fa-5x"></span> fa-5x
<span class="fa fa-rocket fa-5x"></span> fa-5x
</div>
</div>
{{Box|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.|Hervorhebung2}}
==Brainy Icons==
Auf der offiziellen Seite der Brainy Icons findet sich eine [https://unterrichten.zum.de/wiki/Hilfe:Icons_einbinden/Brainy_Icons Übersicht ü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.):
<div class="grid">
<div class="width-1-2">
'''Das schreibt man:'''
<pre>
<span class="brainy hdg-space-shuttle"></span>
</pre>
</div>
<div class="width-1-2">
'''Das sieht man:'''
<span class="brainy hdg-space-shuttle"></span>
</div>
</div>
Auch bei den Brainy Icons können die oben genannten Größenklassen verwendet werden, also z.B.
<div class="grid">
<div class="width-1-2">
'''Das schreibt man:'''
<pre>
<span class="brainy hdg-space-shuttle fa-5x"></span>
</pre>
</div>
<div class="width-1-2">
'''Das sieht man:'''
<span class="brainy hdg-space-shuttle fa-5x"></span>
</div>
</div>


'''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.
==Icons in Links==
Die Icons können auch in Links eingebunden werden:


*[https://fontawesome.com/v4.7.0/icons/ Übersicht über alle Font Awesome Icons]
<div class="grid">
*[https://fontawesome.com/v4.7.0/examples/ Weitere Formatierungsmöglichkeiten]
<div class="width-1-2">
'''Das schreibt man:'''
<pre>
[[Hauptseite|<span class="fa fa-rocket></span> Hauptseite]]
[[Hauptseite|<span class="brainy hdg-space-shuttle></span> Hauptseite]]
</pre>
</div>
<div class="width-1-2">
'''Das sieht man:'''
 
[[Hauptseite|<span class="fa fa-rocket"></span> Hauptseite]]
 
[[Hauptseite|<span class="brainy hdg-space-shuttle"></span> Hauptseite]]
</div>
</div>

Aktuelle Version vom 1. Juli 2024, 13:59 Uhr



Hilfen im Grundschullernportal

Hilfeseiten zu den Vorlagen

Multimedia

Hilfeseiten

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 Übersicht ü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

Abgerufen von „https://grundschullernportal.zum.de/index.php?title=Hilfe:Icons&oldid=68625“