Seite auswählen

Black Forest Vision IconFont


Brands & Material Icons

Black Forest Vision Iconfont wurde entwickelt um die gängigsten Icons die wir tagtäglich benötigen, in einer Sammlung zusammenzuführen. Brands, Material Icons und selbstgestaltete Icons bilden die Black Forest Vision Iconfont.

Die Beispiele sind anerkennend von Font Awesome übernommen.

Get Started

CDN

Sie können den CDN-Link nutzen um „Black Forest Vision Iconfont“ mit nur einer Zeile Code Ihrer Webseite hinzuzufügen. Sie müssen nichts downloaden oder installieren!

1. Kopieren Sie den folgenden Code in den <head> Bereich Ihrer Webseite.

<link rel="stylesheet" href=
 "https://blackforestvision.de/src/iconfont/bfv_iconfont.min.css"
 integrity=
 "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz
 /K68vbdEjh4u" crossorigin="anonymous"
>

2. Schaue Sie sich die Beispiele an wie man „Black Forest Vision Iconfont“ verwendet!

Selbst hosten

Nutzen Sie diese Methode wenn Sie „Black Forest Vision Iconfont“ selbst hosten wollen.

1. Kopieren Sie den gesamten bfv-iconfont Ordner in Ihr Projekt.
2. Verweisen Sie im <head> Bereich Ihrer Webseite auf „bfv_iconfont.min.css“.

<link rel="stylesheet" href=
  "path/to/bfv-iconfont/bfv_iconfont.min.css"
>

3. Schaue Sie sich die Beispiele an wie man „Black Forest Vision Iconfont“ verwendet!

Beispiele

Basis Icons

Mit dem Prefix sh und dem Iconnamen können Sie Icons überall verwenden. Black Forest Vision Iconfont ist designed um mit inline Elementen verwendet zu werden (wir mögen den <i> tag wegen der Kürze, <span> wäre jedoch semantisch korrekter).

<i class="sh sh-camera"></i>
Wenn Sie die Schriftgröße (font-size) im Container des Icons erhöhen, vergrößert sich das Icon.
Selbes gilt für Farbe, Schlagschatten und alles Weitere was sich mit CSS stylen lässt.
Größere Icons

Um die Icongröße relativ zu dessen Container zu erhöhen, nutzen Sie die sh-lg (33%), sh-2x, sh-3x, sh-4x, oder sh-5x Klassen (class).

<i class="sh sh-camera sh-lg"></i>
<i class="sh sh-camera sh-2x"></i>
<i class="sh sh-camera sh-3x"></i>
<i class="sh sh-camera sh-4x"></i>
<i class="sh sh-camera sh-5x"></i>
Falls das Icon oben und unten abgeschnitten wird, stellen Sie sicher dass ausreichend line-height zur Verfügung steht.
Feste Breite
Home
Library
Applications
Settings

Nutzen Sie sh-fw um Icons eine feste Breite (width) zu geben. Hilfreich um die unterschiedlichen Breiten der Icons auszugleichen, besonders in Navigationsleisten und Listen.

<i class="sh sh-excl-mark sh-fw"></i> Home<br />
<i class="sh sh-square sh-fw"></i> Library<br />
<i class="sh sh-smartphone sh-fw"></i> Applications<br />
<i class="sh sh-cog sh-fw"></i> Settings
Listen-Icons
  • Listenicons
  • können als
  • Punkte in Listen
  • verwendet werden

Verwenden Sie sh-ul und sh-li um die Standartpunkte von unsortieren Listen (unordered lists) auszutauschen.

<ul class="sh-ul">
    <li><i class="sh-li sh sh-check"></i>Listenicons</li>
    <li><i class="sh-li sh sh-check"></i>können als</li>
    <li><i class="sh-li sh sh-x"></i>Punkte in Listen</li>
    <li><i class="sh-li sh sh-square"></i>verwendet werden</li>
</ul>
Rotation und Spiegelung
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Um Icons zu rotieren oder spiegeln, verwenden Sie die sh-rotate-* und sh-flip-* Klassen.

<i class="sh sh-flyer"> normal<br>
<i class="sh sh-flyer sh-rotate-90"> fa-rotate-90<br>
<i class="sh sh-flyer sh-rotate-180"> fa-rotate-180<br>
<i class="sh sh-flyer sh-rotate-270"> fa-rotate-270<br>
<i class="sh sh-flyer sh-flip-horizontal"> fa-flip-horizontal<br>
<i class="sh sh-flyer sh-flip-vertical"> fa-flip-vertical
Kombinationen
sh-twitter-b auf sh-square-b
sh-twitter-b auf sh-circle

Um mehrere Icons übereinander zu legen, nutzen Sie die sh-stack Klasse im Elternelement, sh-stack-1x für das reguläre und sh-stack-2x für das größere Icon. sh-inverse kann benutzt werden um eine weiße Iconfarbe zu wählen.

<span class="sh-stack sh-lg">
    <i class="sh sh-square-b sh-stack-2x"></i>
    <i class="sh sh-twitter-b sh-stack-1x"></i>
</span>
sh-twitter-b auf sh-square-b<br>

<span class="sh-stack sh-lg">
    <i class="sh sh-circle sh-stack-2x"></i>
    <i class="sh sh-twitter-b sh-stack-1x sh-inverse"></i>
</span>
sh-twitter-b auf sh-circle