Vorlage:Icon: Unterschied zwischen den Versionen

Aus BrandWiki
Wechseln zu:Navigation, Suche
imported>Ahoi
 
(53 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 
<noinclude>
 
<noinclude>
−
==How it works==
 
−
The template includes the following recommended code, see [https://getbootstrap.com/docs/3.3/components/ glyphicons bootstrap]:
 
  
−
<code><nowiki><span class="glyphicon glyphicon-</nowiki>'''globe'''<nowiki>" aria-hidden="true"></span></nowiki></code>
 
  
−
==How and when to use in text==
+
==Icons verwenden==
−
It can be used easily via code:
+
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>
 
<strong><code><nowiki>{{Icon|</nowiki>'''globe'''<nowiki>}}</nowiki></code></strong>
  
−
It will then look like this: {{Icon|globe}}
+
Das sieht dann so aus: {{Icon|globe}}
  
−
Substitute '''<code>globe</code>''' for the following codes:
+
Ersetze '''<code>globe</code>''' mit dem passenden Code für das passende Icon:
  
−
; <span class="glyphicon glyphicon-book" aria-hidden="true"></span> <code>book</code>
+
; <i class="fas fa-book" aria-hidden="true"></i> <code>book</code>
 
: Wikipedia
 
: Wikipedia
  
−
; <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <code>comment</code>
+
; <i class="fas fa-comment" aria-hidden="true"></i> <code>comment</code>
−
: BrandWiki's comment
+
: BrandWikis Kommentar
  
−
; <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> <code>certificate</code>
+
; <i class="fas fa-building" aria-hidden="true"></i> <code>building</code>
−
: brand certificates (labels, quality marks, seals) (used on brand pages, list of certificates)
+
: Typ einer Organisation
−
: '''maybe''': issuer of certificates, i.e. a company/institution
 
  
−
; <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <code>envelope</code>
+
; <i class="fas fa-compass" aria-hidden="true"></i> <code>compass</code>
−
: Contact
+
: Zertifikate, Index, Label-Checks
  
−
; <span class="glyphicon glyphicon-globe" aria-hidden="true"></span> <code>globe</code>
+
; <i class="fas fa-certificate" aria-hidden="true"></i> <code>certificate</code>
−
: for URLs (not all outgoing links, but "primary home base" on the web, like brand websites)
+
: Zertifikate (Labels, Qualitätszeichen, Siegel) auf Markenseiten und Zertifikaten
  
−
; <span class="glyphicon glyphicon-home" aria-hidden="true"></span> <code>home</code>
+
; <i class="fas fa-envelope" aria-hidden="true"></i> <code>envelope</code>
−
: enterprise, mother company
+
: Kontakt
  
−
; <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <code>heart-empty</code>
+
; <i class="fas fa-globe" aria-hidden="true"></i> <code>globe</code>
−
: brand values, wiki editing guidelines
+
: für Links/URLs (vorwiegend eigene Websites und Social Media)
  
−
; <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <code>info-sign</code>
+
; <i class="fas fa-home" aria-hidden="true"></i> <code>home</code>
−
: About
+
: Konzern, Mutterunternehmen
  
−
; <span class="glyphicon glyphicon-knight" aria-hidden="true"></span> <code>knight</code>
+
; <i class="fas fa-heart" aria-hidden="true"></i> <code>heart</code>
−
: used for persons (not <code>user</code>, since this applies to the online user)
+
: Markenwerte, Editierrichtlinien
  
−
; <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> <code>leaf</code>
+
; <i class="fas fa-info-circle" aria-hidden="true"></i> <code>info-circle</code>
−
: label for label checks looking closely at sustainability concerning environment
+
: Über, mehr Info
  
−
; <span class="glyphicon glyphicon-level-up" aria-hidden="true"></span> <code>level-up</code>
+
; <i class="fas fa-question-circle" aria-hidden="true"></i> <code>question-circle</code>
−
: Topic
+
: Frage
  
−
; <span class="glyphicon glyphicon-link" aria-hidden="true"></span> <code>link</code>
+
; <i class="fas fa-chess-knight" aria-hidden="true"></i> <code>chess-knight</code>
 +
: Personen (eher nicht: User)
 +
 
 +
; <i class="fas fa-user" aria-hidden="true"></i> <code>user</code>
 +
: Personen, im Sinne von Online-User
 +
 
 +
; <i class="fas fa-link" aria-hidden="true"></i> <code>link</code>
 
: Weblinks
 
: Weblinks
  
−
; <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> <code>map-marker</code>
+
; <i class="fas fa-map-marker" aria-hidden="true"></i> <code>map-marker</code>
−
: country of headquarters
+
: Sitz eines Unternehmens
 +
 
 +
; <i class="fas fa-palette" aria-hidden="true"></i> <code>palette</code>
 +
: Markenfarben
 +
 
 +
; <i class="fas fa-paste" aria-hidden="true"></i> <code>paste</code>
 +
: Quellen
 +
 
 +
; <i class="fas fa-pencil-alt" aria-hidden="true"></i> <code>pencil-alt</code>
 +
: Bearbeiten
 +
 
 +
; <i class="fas fa-plus" aria-hidden="true"></i> <code>plus</code>
 +
: &#43; neu hinzufügen
 +
 
 +
; <i class="fas fa-tag" aria-hidden="true"></i> <code>tag</code>
 +
: Kategorie
 +
 
 +
; <i class="fas fa-tags" aria-hidden="true"></i> <code>tags</code>
 +
: Schlagwörter
 +
 
 +
; <i class="fas fa-th" aria-hidden="true"></i> <code>th</code>
 +
: Thema, Kategorie
 +
 
 +
; <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.
  
−
; <span class="glyphicon glyphicon-paste" aria-hidden="true"></span> <code>paste</code>
+
; <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> <code>exclamation-triangle</code>
−
: Sources
+
: Achtung in der [[Template:Box|Box-Vorlage]]
  
−
; <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <code>pencil</code>
+
; <i class="fas fa-leaf" aria-hidden="true"></i> <code>leaf</code>
−
: icon for editing
+
: für [[Greenpeace Gütezeichen-Guide]], ein Labeltests, der Labels auf Nachhaltigkeit in Bezug auf die Umwelt prüft
  
−
; <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <code>plus</code>
+
; <i class="fas fa-shopping-bag" aria-hidden="true"></i> <code>shopping-bag</code>
−
: &#43; add new
+
: 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==
 +
Wir sind von [https://getbootstrap.com/docs/3.3/components/ Bootstraps Glyphicons] mit der neuen Skin auf Font Awesome gewechselt, derzeit noch in [https://fontawesome.com/v5/search Version 5] (die neueste ist Version 6). Möglich sind nur jene, die als „Free“ gekennzeichnet sind (keine Pro-Version).
 +
 
 +
<!--glyphicon
 +
<code><nowiki><span class="glyphicon glyphicon-</nowiki>'''globe'''<nowiki>" aria-hidden="true"></span></nowiki></code>
  
−
; <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <code>star</code>
+
font awesome
−
: approved content (in this wiki), featured content
+
<code><nowiki><i class="fa-regular fa-globe-</nowiki>'''globe'''<nowiki>" aria-hidden="true"></span></nowiki></code>-->
  
−
; <span class="glyphicon glyphicon-tag" aria-hidden="true"></span> <code>tag</code>
+
Die Einbindung innerhalb der Vorlage erfolgt mittels des Code zu Font Aweseome:
−
: category
 
  
−
; <span class="glyphicon glyphicon-tags" aria-hidden="true"></span> <code>tags</code>
+
<code><nowiki><i class="fas fa-</nowiki>'''globe'''<nowiki>" aria-hidden="true"></i></nowiki></code>
−
: key words
 
  
−
; <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> <code>th-list</code>
+
ergibt:
−
: list, see all in one category
+
<i class="fas fa-globe" aria-hidden="true"></i>
  
−
; <span class="glyphicon glyphicon-text-background" aria-hidden="true"></span> <code>text-background</code>
+
<!------- v6
−
: brand colour
+
<i class="fa-regular fa-globe"></i>
 +
<i class="fa-solid fa-globe"></i>
  
−
===not yet used===
+
<i class="fa-solid fa-book" aria-hidden="true"></i>
−
; <span class="glyphicon glyphicon-th" aria-hidden="true"></span> <code>th</code>
+
-------->
−
: brand class/topic (''food, fashion, cosmetics'')
 
−
; <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span> <code>tree-deciduous</code>
 
−
; <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span> <code>tree-conifer</code>
 
−
; <span class="glyphicon glyphicon-alert" aria-hidden="true"></span> <code>alert</code>
 
−
; <span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> <code>piggy-bank</code>
 
−
; <span class="glyphicon glyphicon-grain" aria-hidden="true"></span> <code>grain</code>
 
−
; <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> <code>fire</code>
 
−
; <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <code>heart</code>
 
  
−
</noinclude><includeonly><span class="glyphicon glyphicon-{{{1}}}" title="{{{1}}}" alt="" aria-hidden="true"></span></includeonly>
+
</noinclude><includeonly><i class="fas fa-{{{1}}}" title="{{{1}}}" alt="" aria-hidden="true"></i></includeonly>

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:


Abgerufen von „https://brandwiki.org/index.php?title=Vorlage:Icon&oldid=5055“
CC BY-NC-SA 4.0
Powered by MediaWiki
WikiAhoi
Powered by Semantic MediaWiki