SK-REG BLOG

Dieser Block befindet sich derzeit im Aufbau und wird
ständig erweitert. Daher bitten wir um Verständnis, falls noch
nicht alle Funktionalitäten zur Verfügung stehen.
Dieses Projekt sehe ich als Terapie, um nicht zu vergessen
Details
SK Icon Sorter

Alle Font Awesome Icons suchen, sortieren, kopieren

Der SK Icon Sorter ist eine Icon Bibliothek zum Mitnehmen: Alle kostenlosen Font Awesome Icons sind bereits vorhanden und nach Kategorien geordnet. Du suchst ein Icon, kopierst es mit einem Klick und baust dir nebenbei deine eigene, sortierte Icon Sammlung auf direkt im Browser, ohne Anmeldung.

  • 1.895 Icons
  • 2.060 Varianten
  • 68 Kategorien
  • 0 Anmeldung nötig

Die Funktionen

Schnelle Suche

Suche nach Name, Stichwort oder Font Awesome Kategorie. Ein Filter trennt die Stile Solid, Regular und Brands.

Fertige Kategorien

Beim ersten Öffnen sind alle Icons bereits in die 68 Kategorien von Font Awesome einsortiert. Was keiner Kategorie angehört, liegt in „Unsortiert“.

Zwei Kopierformen

Jedes Icon lässt sich als fertiger HTML Code oder nur als Klassenname kopieren einzeln oder für eine ganze Kategorie.

Eigene Kategorien

Lege eigene Kategorien an, benenne sie um, lösche sie und ziehe Icons per Drag & Drop dorthin. Die Sortierung A–Z geht per Klick.

Import

Füge Icon Namen, Klassen oder ganzen HTML Code ein, das Tool erkennt die Icons selbst. Gespeicherte Sammlungen lädst du als JSON Datei zurück.

Export

Exportiere deine Sammlung als HTML (nach Kategorien gegliedert), als JSON oder als reine Klassenliste zum Kopieren oder als Datei.

So kopierst du ein Icon

Fahre mit der Maus über ein Icon. Es erscheinen zwei kleine Buttons:

Button „</>“ kopiert den HTML Code <i class="fa brands fa fonticons"></i>
Button „Kopieren“ kopiert nur die Klassen fa brands fa fonticons

Dieselben zwei Buttons findest du im Kopf jeder Kategorie. Sie kopieren dann alle Icons der Kategorie auf einmal, ein Icon pro Zeile.

So funktioniert’s

  1. Icon suchen. Tippe einen Begriff in die Icon Bibliothek oder wähle links eine Kategorie und einen Stil.
  2. Kategorie wählen. Ein Klick auf den Namen einer Kategorie öffnet sie und macht sie zur aktiven. Es ist immer nur eine Kategorie offen.
  3. Icon einfügen. Ein Klick auf ein Icon der Bibliothek legt es in die aktive Kategorie. Alternativ ziehst du es mit der Maus hinein.
  4. Sortieren. Verschiebe Icons zwischen Kategorien, entferne sie mit dem Kreuz oder sortiere alphabetisch.
  5. Kopieren oder exportieren. Nimm einzelne Icons mit den Kopier Buttons mit oder exportiere die ganze Sammlung.

Gut zu wissen

  • Alles lokal: Icons, Schriften und Kategorien liegen auf dem Server dieser Seite. Es werden keine Daten an Dritte gesendet.
  • Deine Sortierung bleibt im Browser: Sie wird auf deinem Gerät gespeichert, nicht auf dem Server. Auf einem anderen Gerät siehst du sie nicht nimm sie über den JSON Export mit.
  • Zurücksetzen: Mit „Zurücksetzen“ startest du wieder mit den Font Awesome Kategorien. „FA Kategorien laden“ ergänzt sie, ohne deine eigenen zu löschen.
  • Für alle Geräte: Das Tool passt sich der Breite an und funktioniert am Desktop, Tablet und Smartphone.

Einstellungen im Backend

Farbe der Icons Farbwähler, Standard ist das Gold #B1976B.
Font Awesome Kategorien vorbelegen Beim ersten Aufruf alle Icons vorsortieren (Ein/Aus).
Mitgeliefertes Font Awesome laden Lädt Font Awesome 6.7.2 vom eigenen Server. Abschalten nur, wenn das Template schon eine aktuelle Version 6 enthält.
Überschrift Titel über dem Tool, leer lassen zum Ausblenden.

Häufige Fragen

Wie binde ich das Tool in einen Beitrag ein?
Lege das Modul „SK Icon Sorter“ an, veröffentliche es und füge im Beitrag {loadmoduleid´ 123} ein. Statt 123 trägst du die ID deines Moduls ein.
Warum sehe ich meine Sortierung auf einem anderen Gerät nicht?
Die Sammlung wird im Speicher deines Browsers abgelegt. Exportiere sie als JSON, speichere die Datei und lade sie auf dem anderen Gerät über „JSON laden“ wieder ein.
Wie bekomme ich ein Icon auf meine Webseite?
Kopiere den HTML Code des Icons und füge ihn an der gewünschten Stelle ein. Auf der Seite muss Font Awesome 6 geladen sein, sonst bleibt der Platz leer.
Sind alle Icons kostenlos nutzbar?
Das Tool enthält nur die kostenlosen Icons von Font Awesome Free. Für sie gelten die Lizenzen CC BY 4.0 (Icons), SIL OFL 1.1 (Schriften) und MIT (Code). Die Lizenztexte liegen dem Modul bei.

Font Awesome Free 6.7.2 fontawesome.com

Wie bewertest du diesen Beitrag?

– (0 Bewertungen)

0 Kommentare

Noch keine Kommentare. Schreib den ersten!

Deine E-Mail-Adresse wird nicht veröffentlicht.

Anmelden

sk-reg.de