Vorlage:Icon: Unterschied zwischen den Versionen

Aus BrandWiki
Wechseln zu:Navigation, Suche
Zeile 11: Zeile 11:
 
Die Einbindung innerhalb der Vorlage erfolgt mittels des Code zu Font Aweseome:
 
Die Einbindung innerhalb der Vorlage erfolgt mittels des Code zu Font Aweseome:
  
<code><nowiki><i class="fas fa-</nowiki>'''globe'''<nowiki>" aria-hidden="true"></span></nowiki></code>
+
<code><nowiki><i class="fas fa-</nowiki>'''globe'''<nowiki>" aria-hidden="true"></i></nowiki></code>
  
 
ergibt:
 
ergibt:
Zeile 31: Zeile 31:
  
 
Ersetze '''<code>globe</code>''' mit dem passenden Code für das passende Icon:
 
Ersetze '''<code>globe</code>''' mit dem passenden Code für das passende Icon:
 
 
; <i class="fa-solid fa-book" aria-hidden="true"> <code>book</code>
 
; <i class="fa-solid fa-book" aria-hidden="true"> <code>book</code>
; <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
 
: BrandWiki's comment
  
; <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> <code>certificate</code>
+
; <i class="fas fa-certificate" aria-hidden="true"></i> <code>certificate</code>
 
: brand certificates (labels, quality marks, seals) (used on brand pages, list of certificates)
 
: brand certificates (labels, quality marks, seals) (used on brand pages, list of certificates)
 
: '''maybe''': issuer of certificates, i.e. a company/institution
 
: '''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-envelope" aria-hidden="true"></i> <code>envelope</code>
 
: Contact
 
: Contact
  
; <span class="glyphicon glyphicon-globe" aria-hidden="true"></span> <code>globe</code>
+
; <i class="fas fa-globe" aria-hidden="true"></i> <code>globe</code>
 
: for URLs (not all outgoing links, but "primary home base" on the web, like brand websites)
 
: for URLs (not all outgoing links, but "primary home base" on the web, like brand websites)
  
; <span class="glyphicon glyphicon-home" aria-hidden="true"></span> <code>home</code>
+
; <i class="fas fa-home" aria-hidden="true"></i> <code>home</code>
 
: enterprise, mother company
 
: enterprise, mother company
  
; <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <code>heart-empty</code>
+
; <i class="fas fa-heart-empty" aria-hidden="true"></i> <code>heart-empty</code>
 
: brand values, wiki editing guidelines
 
: brand values, wiki editing guidelines
  
; <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <code>info-sign</code>
+
; <i class="fas fa-info-sign" aria-hidden="true"></i> <code>info-sign</code>
 
: About
 
: About
  
; <span class="glyphicon glyphicon-knight" aria-hidden="true"></span> <code>knight</code>
+
; <i class="fas fa-knight" aria-hidden="true"></i> <code>knight</code>
 
: used for persons (not <code>user</code>, since this applies to the online user)
 
: used for persons (not <code>user</code>, since this applies to the online user)
  
; <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> <code>leaf</code>
+
; <i class="fas fa-leaf" aria-hidden="true"></i> <code>leaf</code>
 
: label for label checks looking closely at sustainability concerning environment
 
: label for label checks looking closely at sustainability concerning environment
  
; <span class="glyphicon glyphicon-level-up" aria-hidden="true"></span> <code>level-up</code>
+
; <i class="fas fa-level-up" aria-hidden="true"></i> <code>level-up</code>
 
: Topic
 
: Topic
  
; <span class="glyphicon glyphicon-link" aria-hidden="true"></span> <code>link</code>
+
; <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
 
: country of headquarters
  
; <span class="glyphicon glyphicon-paste" aria-hidden="true"></span> <code>paste</code>
+
; <i class="fas fa-paste" aria-hidden="true"></i> <code>paste</code>
 
: Sources
 
: Sources
  
; <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <code>pencil</code>
+
; <i class="fas fa-pencil" aria-hidden="true"></i> <code>pencil</code>
 
: icon for editing
 
: icon for editing
  
; <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <code>plus</code>
+
; <i class="fas fa-plus" aria-hidden="true"></i> <code>plus</code>
 
: &#43; add new
 
: &#43; add new
  
; <span class="glyphicon glyphicon-star" aria-hidden="true"></span> <code>star</code>
+
; <i class="fas fa-star" aria-hidden="true"></i> <code>star</code>
 
: approved content (in this wiki), featured content
 
: approved content (in this wiki), featured content
  
; <span class="glyphicon glyphicon-tag" aria-hidden="true"></span> <code>tag</code>
+
; <i class="fas fa-tag" aria-hidden="true"></i> <code>tag</code>
 
: category
 
: category
  
; <span class="glyphicon glyphicon-tags" aria-hidden="true"></span> <code>tags</code>
+
; <i class="fas fa-tags" aria-hidden="true"></i> <code>tags</code>
 
: key words
 
: key words
  
; <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> <code>th-list</code>
+
; <i class="fas fa-th-list" aria-hidden="true"></i> <code>th-list</code>
 
: list, see all in one category
 
: list, see all in one category
  
; <span class="glyphicon glyphicon-text-background" aria-hidden="true"></span> <code>text-background</code>
+
; <i class="fas fa-text-background" aria-hidden="true"></i> <code>text-background</code>
 
: brand colour
 
: brand colour
  
 
===not yet used===
 
===not yet used===
; <span class="glyphicon glyphicon-th" aria-hidden="true"></span> <code>th</code>
+
; <i class="fas fa-th" aria-hidden="true"></i> <code>th</code>
 
: brand class/topic (''food, fashion, cosmetics'')
 
: brand class/topic (''food, fashion, cosmetics'')
; <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span> <code>tree-deciduous</code>
+
; <i class="fas fa-tree-deciduous" aria-hidden="true"></i> <code>tree-deciduous</code>
; <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span> <code>tree-conifer</code>
+
; <i class="fas fa-tree-conifer" aria-hidden="true"></i> <code>tree-conifer</code>
; <span class="glyphicon glyphicon-alert" aria-hidden="true"></span> <code>alert</code>
+
; <i class="fas fa-alert" aria-hidden="true"></i> <code>alert</code>
; <span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span> <code>piggy-bank</code>
+
; <i class="fas fa-piggy-bank" aria-hidden="true"></i> <code>piggy-bank</code>
; <span class="glyphicon glyphicon-grain" aria-hidden="true"></span> <code>grain</code>
+
; <i class="fas fa-grain" aria-hidden="true"></i> <code>grain</code>
; <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> <code>fire</code>
+
; <i class="fas fa-fire" aria-hidden="true"></i> <code>fire</code>
; <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <code>heart</code>
+
; <i class="fas fa-heart" aria-hidden="true"></i> <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>

Version vom 13. April 2022, 11:14 Uhr

Wie es funktioniert

Wir sind von Bootstraps Glyphicons mit der neuen Skin auf Font Awesome (Version 5) gewechselt.


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

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

ergibt:


Im Text verwenden

So kann die Vorlage im Text (oder in weiteren Vorlagen) verwendet werden:

{{Icon|globe}}

Das sieht dann so aus:

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