Icon Fonts
Kreative Icons in jedem Design
Icon Fonts wie Font Awesome sind nicht einfach Bilder, sie benehmen sich wie Buchstaben, die beschlossen haben, ein aufregenderes Leben zu führen. Mit ein wenig CSS-Magie kannst du ihre Größe ändern, die Farben nach Belieben verzaubern oder ihnen Schatten und Drehungen verpassen, als wären sie auf einem magischen Karussell.
Der Clou? Alle Icons kommen in einer einzigen Schriftdatei, was die Ladezeiten deiner Seite beschleunigt, als hättest du einen Geschwindigkeitszauber gewirkt. Und weil sie wie Text funktionieren, passen sie sich jeder Bildschirmgröße an und sind immer gestochen scharf. Kein mühsames Nachjustieren, keine verschwommenen Symbole. Sie sind einfach bereit für jedes Abenteuer, das du für sie planst!
Icon Fonts im HTML
Leicht, skalierbar, vielseitig – Symbole ohne Bilddateien nutzen!
Font Awesome Icons
Die unendliche Schatztruhe – Ein Symbol für jeden Zauber
Font Awesome ist die ultimative Schatzkammer, gefüllt mit über 1.500 Symbolen, die für jede Herausforderung bereitstehen. Du suchst nach einem Zeichen, um deine sozialen Botschaften über weite Distanzen zu senden? Oder nach Symbolen, um Reisende durch die verschlungenen Pfade deiner Webseite zu leiten? Kein Problem! Diese Sammlung ist so umfangreich, dass du für jede Herausforderung gewappnet bist. Sie sind leicht anzupassen, und du wirst das Gefühl haben, eine endlose Schatztruhe an Möglichkeiten geöffnet zu haben, voller Symbole, die dein Werk vollenden. Um Font Awesome in dein Projekt einzubinden, ohne auf einen externen CDN-Zauber angewiesen zu sein, folge diesen Schritten. Keine Sorge, du musst nicht einmal ein Hexenmeister sein, ein bisschen HTML reicht völlig aus
Font Awesome Icons
Schritt-für-Schritt-Anleitung
- Font Awesome herunterladen
Gehe zur Font Awesome Webseite ( download ) und lade die neueste Version herunter. Für die freien Zauberer unter uns reicht die Free-Version völlig aus. Es ist kein Gold nötig! Hier findest du die Übersicht aller freien Icons. - Entpacke die Dateien
Entpacke das heruntergeladene Archiv. Du wirst verschiedene Ordner finden, darunter css und webfonts. Das sind die Schätze, die wir brauchen. - Font Awesome in dein Projekt einfügen
Kopiere die Ordner css und webfonts in dein Projektverzeichnis. Platziere sie an einem Ort, der leicht zugänglich ist, zum Beispiel in einem Ordner namens assets oder fonts. - Verlinke das CSS in deinem HTML
Im <head>-Bereich deiner HTML-Datei fügst du folgenden magischen Spruch ein und überprüfe, ob der Pfad stimmt, sonst kann der Zauber nicht wirken!
<link rel="stylesheet" href="fonts/css/all.css">- Icons in dein HTML zaubern
Jetzt kannst du Font Awesome Icons wie gewohnt in deinem HTML verwenden. den Code dafür suchst du am Besten auf der Seite von Font Awesome, wenn du auf das Icon klickst, welches du benutzen möchtest.
<i class="fas fa-coffee"></i>Hinweise
Kein externes CDN (Content Delivery Network)
Da du die Dateien lokal hostest, bist du unabhängig von den Launen externer Server, und deine Icons werden auch dann geladen, wenn die Verbindung ins große Netz gerade im Nebel verschwindet.
Aktualisiere regelmäßig
Wenn Font Awesome neue Schätze veröffentlicht, musst du die Dateien von Zeit zu Zeit natürlich selbst austauschen, um die neuesten Zauber (äh, Icons) nutzen zu können.
Material Design Icons
Symbole mit Stil – Google schickt seine Zeichen
Material Design Icons sind wie die prächtigen Insignien der großen Meisterschmiede, die von den Designweisen Google selbst erschaffen wurden. Diese minimalistischen Symbole fügen sich in jede Struktur ein, wie alte Zeichen auf einer uralten Schriftrolle. Sie sind besonders für magische Geräte, die in jede Tasche passen, gedacht und bringen Ordnung und Klarheit in deine digitalen Werke. Sobald sie eingefügt sind, erstrahlt dein Design, als hätte es eine uralte Weisheit in sich aufgenommen – subtil und doch kraftvoll, immer bereit, das Auge zu erfreuen.
Wage dich in die mystische Kunst, Material Icons in dein Projekt einzubinden, und das ganz ohne die Hilfe fremder Server, damit du die Wächter des Datenschutzes nicht auf den Plan rufst. Lass uns deine Seite zum Leben erwecken – und zwar auf die Weise eines wahren Zauberers, mit der mächtigen @font-face-Regel!
Material Design Icons
Schritt-für-Schritt-Anleitung
- Zuerst: Die Schatzkarte
Navigiere auf die Material Design Webseite und lade das geheime Schriftrollen-Set herunter. Achte darauf, dass du auch die wahren magischen Artefakte (die Schriftarten-Dateien wie MaterialIcons-Regular.woff2) erhältst. Keine Sorge, es kostet dich keinen einzigen Goldtaler! - Ein magisches Versteck anlegen
Erstelle in deinem Projekt einen Ordner, nennen wir ihn fonts, und lege die kostbaren Font-Dateien dort ab. Ein weiterer Ordner namens css beherbergt die CSS-Datei – nennen wir sie material-icons.css – in der du die Zauberformel eintragen wirst. - Die @font-face Zauberformel anwenden
Öffne nun deine CSS-Schriftrolle und füge den folgenden Zauberspruch ein. Das weist dem Browser den Weg zu deinen magischen Schriftrollen. Er wird sie weise interpretieren und in deinem Namen wirken lassen.
@font-face {
font-family: 'Material Icons';
src: url ("fonts/MaterialIcons-Regular.woff2") format('woff2'),
url("fonts/MaterialIcons-Regular.woff") format('woff');
font-weight: normal;
}- Füge die Symbole in dein HTML ein
Jetzt kannst du deine Symbole mit einem einfachen Zauberspruch beschwören. Schau zu, dass der Pfad stimmt, sonst kann der Zauber nicht wirken! Wie von Zauberhand wird das Symbol erscheinen, und du kannst es mit CSS nach Belieben stylen – es ist, als würdest du deine eigenen magischen Artefakte erschaffen!
<span class="material-icons">home</span>
Bootstrap Icons
Schlicht, aber mächtig – Werkzeuge der Gelehrten
Bootstrap Icons sind wie die verlässlichen Werkzeuge in der Schatzkiste eines Designers. Sie tun nicht so, als wären sie die Stars der Show, aber sie wissen, dass ohne sie nichts läuft. Ob für Navigation, Buttons oder Benachrichtigungen, denn sie passen sich überall ein, wie ein perfekt geschnittenes Kleidungsstück, das einfach zu jedem Anlass passt. Sie sind leicht, effizient und so praktisch, dass du kaum merkst, dass sie da sind, bis du sie brauchst.
Bootstrap Icons
Schritt-für-Schritt-Anleitung
- Lade die Symbole herunter
Gehe auf die Bootstrap Icons Webseite und lade die neueste Version herunter. Keine Sorge, das ist völlig kostenlos – du musst dafür nicht einmal einen Trank mischen! - Entpacke die Dateien
Nach dem Herunterladen entpacke das Archiv. Du wirst auf Ordner wie font und css stoßen – das sind die Zutaten, die wir brauchen. - In dein Projekt einfügen
Kopiere die Ordner in dein Projekt, am besten in einen Ordner wie assets oder icons, um Ordnung im magischen Arsenal zu bewahren.
- Verlinke die CSS-Datei
Im <head> deiner HTML-Datei verknüpfst du die bootstrap-icons.css. Das wird die Macht der Symbole aktivieren – vorausgesetzt, der Pfad stimmt!
<link rel="stylesheet" href="assets/icons/bootstrap-icons.css">- Symbole einsetzen
Nun kannst du die Icons mit folgendem magischen Spruch in deine HTML-Datei zaubern.
<i class="bi bi-heart"></i>