Erste Schritte
Wie verwende ich Uicons?
Es gibt drei Möglichkeiten, UIcons in dein Website-Projekt einzubinden: Du kannst sie über unser CDN einfügen, du kannst sie herunterladen und erhältst dann das komplette Icon-Paket in allen verfügbaren Formaten (SVG, CSS, Schriftdatei und HTML-Beispiel), oder du kannst sie mit dem npm-Paketmanager installieren.
Verwendung von Uicons per CDN
Latest version: 2.6.0
Unser CDN ist der schnellste Weg, um Uicons auf deiner Seite einzubinden. Du kannst den Link kopieren und in das <head>-Element deines HTML-Codes einfügen, um unsere CSS-Datei zu laden oder die @import-Regel verwenden, um den Code in dein CSS einzubinden.
Wähle das gewünschte Icon aus und klicke auf die Kopier-Schaltfläche im Abschnitt „CDN“, um den Code in dein Projekt einzufügen.
Verwendung von Uicons per Download
Über die Download-Funktion kannst du den gesamten Icon-Pack zusammen mit der individuellen SVG-Datei für jedes Icon, den CSS-Stylesheets, den Font-Dateien und einem HTML-Beispiel herunterladen.
Wähle das gewünschte Icon aus und klicke auf die Download-Schaltfläche im Abschnitt „Download“, um das gesamte Icon-Pack herunterzuladen.
UIcons mit dem npm-Paketmanager nutzen
Installiere die neueste Version von UIcons – die jedes Icon im SVG-Format, CSS-Stylesheets und Schriftdateien enthält – und halte dein Projekt mithilfe des npm-Paketmanagers mit den neuesten Icons und Verbesserungen ganz einfach auf dem aktuellen Stand.
npm i @flaticon/flaticon-uicons
Auf diese Weise erhältst du das gleiche Ergebnis wie mit dem herunterladbaren Format, aber in einem einfacher zu aktualisierenden Paket.
Für weitere Informationen besuche die
s.
Was ist im Download enthalten?
Jedes Stilpaket von UIcons enthält die folgenden Verzeichnisse und Dateien:
| Dateien & Ordner | Diese sind |
|---|---|
| /css | Stylesheets für Webfonts |
| /svg | Einzelne SVG für jedes Icon |
| /webfont | Webfont-Dateien für die Verwendung mit CSS |
Verwendung von Webfonts mit CSS
In der Datei /css/uicons-[your-style].css sind das Grundstyling sowie alle Icon-Stile enthalten, die du bei der Verwendung von UIcons benötigst. Der Ordner /webfonts enthält alle Schriftart-Dateien, auf die das obige CSS verweist und angewiesen ist.
Kopiere den gesamten /webfonts-Ordner sowie die Datei /css/uicons-[your-style].css in das Verzeichnis mit den statischen Inhalten deines Projekts (oder dorthin, wo du deine Frontend-Inhalte oder dein Verkaufsmaterial aufbewahren möchtest).
Füge in den <head-Bereich> jeder Vorlage oder Seite, auf der du UIcons verwenden möchtest, einen Verweis auf die kopierte /css/uicons-[your-style].css-Datei ein.
Ersetze uicons-[dein-stil].css durch den Namen des Stils, den du heruntergeladen hast.
z. B. uicons-sabgerundet-kontur.css
<head>
<link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fi fi-ro-square-right"></i>
<i class="fi fi-ro-arrow-right"></i>
<i class="fi fi-ro-book"></i>
<i class="fi fi-ro-broom"></i>
</body>
Da du alle heruntergeladenen Dateien selbst verwaltest, solltest du sicherstellen, dass die Verweise im <head-Bereich> deiner Seite mit den Speicherorten aller UIcons-Dateien in deinem Projekt übereinstimmen.
Verwendung mehrerer Stile
Willst du mehrere Stile verwenden? Dazu musst du jeden Stil, den du in deinem Projekt verwenden möchtest, herunterladen.
UIcons bietet dir jeweils zwei verschiedene Eckenstile (abgerundet und eckig) und drei verschiedene Stärken (normal, fett und gefüllt) an.
Als Nächstes legst du alle Dateien wie im vorigen Abschnitt beschrieben in den Ordnern ab und fügst dann für jeden heruntergeladenen Stil einen Verweis in den
-Bereich ein.
<head>
<link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet">
<link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet">
<link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet">
</head>
Jeder Stil verwendet ein anderes Präfix, wie wir in der folgenden Tabelle sehen können:
| Stärke | Ecke | Präfix | Beispiel | Ergebnis |
|---|---|---|---|---|
| Normal | Abgerundet | fi-rr | <i class="fi fi-rr-square-right"></i> |
|
| Fett | Abgerundet | fi-br | <i class="fi fi-br-square-right"></i> |
|
| Flächig | Abgerundet | fi-sr | <i class="fi fi-sr-square-right"></i> |
|
| Dünn | Abgerundet | fi-tr | <i class="fi fi-tr-square-right"></i> |
|
| Normal | Eckig | fi-rs | <i class="fi fi-rs-square-right"></i> |
|
| Fett | Eckig | fi-bs | <i class="fi fi-bs-square-right"></i> |
|
| Flächig | Eckig | fi-ss | <i class="fi fi-ss-square-right"></i> |
|
| Dünn | Eckig | fi-ts | <i class="fi fi-ts-square-right"></i> |
|
| Art | Präfix | Beispiel | Ergebnis |
|---|---|---|---|
| Marken | fi-rr | <i class="fi fi-brands-instagram"></i> |
|
Wir empfehlen, die Ordner /webfonts und /css im gleichen Verzeichnis aufzubewahren. Ansonsten musst du den Pfad zu den Webfonts in den CSS-Dateien der einzelnen Stile ändern.
Verwendung der Icons
Jetzt bist du bereit, in deinen Vorlagen oder Seiten auf Icons zu verweisen.
<body>
<i class="fi fi-rr-square-right"></i>
<i class="fi fi-br-arrow-right"></i>
<i class="fi fi-sr-book"></i>
<i class="fi fi-rr-broom"></i>
</body>
Lizenzübersicht
Unsere Lizenz gestattet es dir, den Inhalt folgendermaßen zu verwenden:
- für kommerzielle und persönliche Projekte
- auf digitalen oder gedruckten Medien
- Für eine unbegrenzte Zahl von Nutzungen und unbefristet
- Anywhere in the world
- To make modifications and derived works
Dieser Text ist eine Zusammenfassung und dient nur zur Information. Er stellt keine vertraglichen Verpflichtungen dar. Bitte beachte vor der Verwendung der Inhalte unsere s.
Korrekte Quellenangabe
Die Gestaltung hochwertiger Icons erfordert viel Zeit und Mühe. Wir bitten dich nur, einen kleinen Zuordnungslink hinzuzufügen. Wähle das Medium aus, in dem du die Ressource verwenden möchtest.
Kopiere diesen Link und füge ihn gut sichtbar in der Nähe des Bildmaterials ein. Wenn dies nicht möglich ist, platzierst du ihn in der Fußzeile deiner Website, deines Blogs, deines Newsletters oder im Abschnitt Bildnachweise.
Bei weiteren Fragen kannst du die FAQ zurate ziehen