5.4 Icons
Zur Illustrierung können Icons aus dem Icon-Satz „Font Awesome“ genutzt werden. Es ist darauf zu achten, dass ein dem Thema nahekommendes und allgemeinverständliches Icon gefunden und im Anschluss seitenübergreifend, einheitlich verwendet wird. Interaktive Icons (z.B. Social-Media, Vorlesen usw.) sind in der Themenfarbe auszuführen.
Die Icons der in diesem Styleguide beschriebenen Komponenten und Elemente sind im „Font Awesome“-Icon-Satz unter folgenden Namen aufzufinden:
Zur Illustrierung können Icons aus dem Icon-Satz „Font Awesome“ genutzt werden. Es ist darauf zu achten, dass ein dem Thema nahekommendes und allgemeinverständliches Icon gefunden und im Anschluss seitenübergreifend, einheitlich verwendet wird. Interaktive Icons (z.B. Social-Media, Vorlesen usw.) sind in der Themenfarbe auszuführen.
Die Icons der in diesem Styleguide beschriebenen Komponenten und Elemente sind im „Font Awesome“-Icon-Satz unter folgenden Namen aufzufinden:
Diese müssen entsprechend dem Regelwerk eingefärbt und positioniert werden. Weitere in Grundfarbe vorbereitete Beispiele aus dem „Font Awesome“-Icon-Satz sind:
Diese müssen entsprechend dem Regelwerk eingefärbt und positioniert werden. Weitere in Grundfarbe vorbereitete Beispiele aus dem „Font Awesome“-Icon-Satz sind:
Quelltext
<div class="row">
<div class="large-1 columns">
<i title="Twitter" class="bb-icon fa fa-twitter fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Facebook" class="bb-icon fa fa-facebook fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Google" class="bb-icon fa fa-google fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Ich habe eine Frage." class="bb-icon fa fa-question fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Ton an/aus" class="bb-icon fa fa-volume-up fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Vorlesen" class="bb-icon fa fa-bullhorn fa-lg"></i>
</div>
<div class="large-1 columns end">
<i title="Download" class="bb-icon fa fa-download fa-lg"></i>
</div>
</div>
<div class="row">
<div class="large-1 columns">
<i title="per E-Mail versenden" class="bb-icon fa fa-envelope fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Gefällt mir!" class="bb-icon fa fa-thumbs-up fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Suchen" class="bb-icon fa fa-search fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Unten" class="bb-icon fa fa-caret-down fa-lg"></i>
</div>
<div class="large-1 columns ">
<i title="Rechts" class="bb-icon fa fa-caret-right fa-lg"></i>
</div>
<div class="large-1 columns end">
<i title="Rechts" class="bb-icon fa fa-angle-double-right fa-lg"></i>
</div>
</div>
<div class="row">
<div class="large-1 columns">
<i title="Twitter" class="bb-icon-text fa fa-twitter fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Facebook" class="bb-icon-text fa fa-facebook fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Google" class="bb-icon-text fa fa-google fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Ich habe eine Frage." class="bb-icon-text fa fa-question fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Ton an/aus" class="bb-icon-text fa fa-volume-up fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Vorlesen" class="bb-icon-text fa fa-bullhorn fa-lg"></i>
</div>
<div class="large-1 columns end">
<i title="Download" class="bb-icon-text fa fa-download fa-lg"></i>
</div>
</div>
<div class="row">
<div class="large-1 columns">
<i title="per E-Mail versenden" class="bb-icon-text fa fa-envelope fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Gefällt mir!" class="bb-icon-text fa fa-thumbs-up fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Suchen" class="bb-icon-text fa fa-search fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Unten" class="bb-icon-text fa fa-caret-down fa-lg"></i>
</div>
<div class="large-1 columns">
<i title="Rechts" class="bb-icon-text fa fa-caret-right fa-lg"></i>
</div>
<div class="large-1 columns end">
<i title="Rechts" class="bb-icon-text fa fa-angle-double-right fa-lg"></i>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et <i title="per E-Mail versenden" class="bb-icon-text fa fa-envelope fa-lg"></i>
E-Mail senden dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
</p>
</div>
<div class="small-6 columns">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
</p>
</div>
</div>
Aufbau
- Die Höhe der Icons als freistehende Elemente entspricht der Standardhöhe x 1,5.
- Der Hintergrund wird in Grundfarbe gestaltet.
- Als Element im Fließtext (Hintergrund transparent, Elementfarbe in Grundfarbe) ist ein Icon so hoch wie die Gesamthöhe eines Kleinbuchstabens („e“, „o“, „a“...).
- Die Höhe der Icons als freistehende Elemente entspricht der Standardhöhe x 1,5.
- Der Hintergrund wird in Grundfarbe gestaltet.
- Als Element im Fließtext (Hintergrund transparent, Elementfarbe in Grundfarbe) ist ein Icon so hoch wie die Gesamthöhe eines Kleinbuchstabens („e“, „o“, „a“...).
Spezifische Anforderungen
Es dürfen ausschließlich Icons aus dem Icon-Satz Font-Awesome verwendet werden.
Bezugsquelle:
https://fontawesome.io/;
https://style.brandenburg.de/cdn/fontawesome/4.6.3/css/font-awesome.min.css
Es dürfen ausschließlich Icons aus dem Icon-Satz Font-Awesome verwendet werden.
Bezugsquelle:
https://fontawesome.io/;
https://style.brandenburg.de/cdn/fontawesome/4.6.3/css/font-awesome.min.css
Barrierefreiheit
Alle Icons müssen über einen Alternativtext verfügen.
Alle Icons müssen über einen Alternativtext verfügen.
Aktionsverhalten
keine Beschränkungen
keine Beschränkungen
Responsive Design
keine Beschränkungen
keine Beschränkungen