Vorlage:Icon: Unterschied zwischen den Versionen

Aktuelle Version vom 29. November 2022, 09:45 Uhr

Icons verwenden

Um Icons in den Text (oder andere Vorlagen) einzubauen, kannst du die Vorlage so verwenden:

{{Icon|globe}}

Das sieht dann so aus:

Ersetze globe mit dem passenden Code für das passende Icon:

book: Wikipedia

comment: BrandWikis Kommentar

building: Typ einer Organisation

compass: Zertifikate, Index, Label-Checks

certificate: Zertifikate (Labels, Qualitätszeichen, Siegel) auf Markenseiten und Zertifikaten

envelope: Kontakt

globe: für Links/URLs (vorwiegend eigene Websites und Social Media)

home: Konzern, Mutterunternehmen

heart: Markenwerte, Editierrichtlinien

info-circle: Über, mehr Info

question-circle: Frage

chess-knight: Personen (eher nicht: User)

user: Personen, im Sinne von Online-User

link: Weblinks

map-marker: Sitz eines Unternehmens

palette: Markenfarben

paste: Quellen

pencil-alt: Bearbeiten

plus: + neu hinzufügen

tag: Kategorie

tags: Schlagwörter

th: Thema, Kategorie

th-list: Liste

Noch ungebraucht:

circle
dot-circle
check-circle: Toggles
user-circle
times-circle
stop-circle
play-circle
pause-circle
spinner
shapes
icicles

Marken-Icons

Für bestimmte Marken-icons brauchst du die erweiterte Vorlage Icon-fab:

{{Icon-fab|instagram}}

facebook
facebook-square
facebook-f
instagram
instagram-square
twitter
twitter-square
pinterest
pinterest-square
pinterest-p
linkedin
linkedin-in
youtube
youtube-square
wikipedia-w

Spezielle Icons, die hier nur einmalig vergeben werden:

Diese werden nur einmalig vergeben und sollte nicht anderweitig im Text eingesetzt werden.

exclamation-triangle: Achtung in der Box-Vorlage

leaf: für Greenpeace Gütezeichen-Guide, ein Labeltests, der Labels auf Nachhaltigkeit in Bezug auf die Umwelt prüft

shopping-bag: für Bewusst kaufen, eine Plattform des österreichischen Bundesministeriums BMK, das Labels beschreibt.

star: Bestätigte Inhalte & für Siegelklarheit, ein Labeltests, der Labels bewertet

Wie es funktioniert

Wir sind von Bootstraps Glyphicons mit der neuen Skin auf Font Awesome gewechselt, derzeit noch in Version 5 (die neueste ist Version 6). Möglich sind nur jene, die als „Free“ gekennzeichnet sind (keine Pro-Version).

Die Einbindung innerhalb der Vorlage erfolgt mittels des Code zu Font Aweseome:

<i class="fas fa-globe" aria-hidden="true"></i>

ergibt:

@@ Zeile 2: / Zeile 2: @@
-==Vorlage im Text verwenden==
+==Icons verwenden==
-So kann die Vorlage im Text (oder in weiteren Vorlagen) verwendet werden:
+Um Icons in den Text (oder andere Vorlagen) einzubauen, kannst du die Vorlage so verwenden:
 <strong><code><nowiki>{{Icon|</nowiki>'''globe'''<nowiki>}}</nowiki></code></strong>
@@ Zeile 10: / Zeile 10: @@
 Ersetze '''<code>globe</code>''' mit dem passenden Code für das passende Icon:
 ; <i class="fas fa-book" aria-hidden="true"></i> <code>book</code>
 : Wikipedia
@@ Zeile 18: / Zeile 19: @@
 ; <i class="fas fa-building" aria-hidden="true"></i> <code>building</code>
 : Typ einer Organisation
+; <i class="fas fa-compass" aria-hidden="true"></i> <code>compass</code>
+: Zertifikate, Index, Label-Checks
 ; <i class="fas fa-certificate" aria-hidden="true"></i> <code>certificate</code>
@@ Zeile 36: / Zeile 40: @@
 ; <i class="fas fa-info-circle" aria-hidden="true"></i> <code>info-circle</code>
 : Über, mehr Info
+; <i class="fas fa-question-circle" aria-hidden="true"></i> <code>question-circle</code>
+: Frage
 ; <i class="fas fa-chess-knight" aria-hidden="true"></i> <code>chess-knight</code>
@@ Zeile 60: / Zeile 67: @@
 ; <i class="fas fa-plus" aria-hidden="true"></i> <code>plus</code>
 : &#43; neu hinzufügen
-; <i class="fas fa-star" aria-hidden="true"></i> <code>star</code>
-: Bestätigte Inhalte (in diesem Wiki)
 ; <i class="fas fa-tag" aria-hidden="true"></i> <code>tag</code>
@@ Zeile 75: / Zeile 79: @@
 ; <i class="fas fa-th-list" aria-hidden="true"></i> <code>th-list</code>
 : Liste
+Noch ungebraucht:
+; <i class="fas fa-circle" aria-hidden="true"></i> <code>circle</code>
+; <i class="fas fa-dot-circle" aria-hidden="true"></i> <code>dot-circle</code>
+; <i class="fas fa-check-circle" aria-hidden="true"></i> <code>check-circle</code>
+: Toggles
+; <i class="fas fa-user-circle" aria-hidden="true"></i> <code>user-circle</code>
+; <i class="fas fa-times-circle" aria-hidden="true"></i> <code>times-circle</code>
+; <i class="fas fa-stop-circle" aria-hidden="true"></i> <code>stop-circle</code>
+; <i class="fas fa-play-circle" aria-hidden="true"></i> <code>play-circle</code>
+; <i class="fas fa-pause-circle" aria-hidden="true"></i> <code>pause-circle</code>
+; <i class="fas fa-spinner" aria-hidden="true"></i> <code>spinner</code>
+; <i class="fas fa-shapes" aria-hidden="true"></i> <code>shapes</code>
+; <i class="fas fa-icicles" aria-hidden="true"></i> <code>icicles</code>
+==Marken-Icons==
+Für bestimmte [https://fontawesome.com/v5/search?m=free&s=solid%2Cbrands Marken-icons] brauchst du die erweiterte Vorlage [[:Template:Icon-fab|Icon-fab]]:
+<strong><code><nowiki>{{Icon-fab|</nowiki>'''instagram'''<nowiki>}}</nowiki></code></strong>
+; <i class="fab fa-facebook" aria-hidden="true"></i> <code>facebook</code>
+; <i class="fab fa-facebook-square" aria-hidden="true"></i> <code>facebook-square</code>
+; <i class="fab fa-facebook-f" aria-hidden="true"></i> <code>facebook-f</code>
+; <i class="fab fa-instagram" aria-hidden="true"></i> <code>instagram</code>
+; <i class="fab fa-instagram-square" aria-hidden="true"></i> <code>instagram-square</code>
+; <i class="fab fa-twitter" aria-hidden="true"></i> <code>twitter</code>
+; <i class="fab fa-twitter-square" aria-hidden="true"></i> <code>twitter-square</code>
+; <i class="fab fa-pinterest" aria-hidden="true"></i> <code>pinterest</code>
+; <i class="fab fa-pinterest-square" aria-hidden="true"></i> <code>pinterest-square</code>
+; <i class="fab fa-pinterest-p" aria-hidden="true"></i> <code>pinterest-p</code>
+; <i class="fab fa-linkedin" aria-hidden="true"></i> <code>linkedin</code>
+; <i class="fab fa-linkedin-in" aria-hidden="true"></i> <code>linkedin-in</code>
+; <i class="fab fa-youtube" aria-hidden="true"></i> <code>youtube</code>
+; <i class="fab fa-youtube-square" aria-hidden="true"></i> <code>youtube-square</code>
+; <i class="fab fa-wikipedia-w" aria-hidden="true"></i> <code>wikipedia-w</code>
 ==Spezielle Icons, die hier nur einmalig vergeben werden:==
+Diese werden nur einmalig vergeben und sollte nicht anderweitig im Text eingesetzt werden.
+; <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> <code>exclamation-triangle</code>
+: Achtung in der [[Template:Box|Box-Vorlage]]
 ; <i class="fas fa-leaf" aria-hidden="true"></i> <code>leaf</code>
-: für [[Greenpeace Austria LabelCheck 2018]], ein Labeltests, der Labels auf Nachhaltigkeit in Bezug auf die Umwelt prüft
+: für [[Greenpeace Gütezeichen-Guide]], ein Labeltests, der Labels auf Nachhaltigkeit in Bezug auf die Umwelt prüft
+; <i class="fas fa-shopping-bag" aria-hidden="true"></i> <code>shopping-bag</code>
+: für [[Bewusst kaufen]], eine Plattform des österreichischen Bundesministeriums BMK, das Labels beschreibt.
+; <i class="fas fa-star" aria-hidden="true"></i> <code>star</code>
+: Bestätigte Inhalte & für [[Siegelklarheit]], ein Labeltests, der Labels bewertet
 ==Wie es funktioniert==