Ich würde meine eigenen font-awesome Icons erstellen. Insbesondere würde ich etwas bauen, das eine Kopie von font-awesome mit all seinen Funktionen ist, aber nur mit einer Teilmenge von Icons.
Außerdem bin ich wirklich interessiert, wie sie Dateien in den Ordnern fonts erstellen.
Auf GitHub habe ich dieses Repo gefunden, das alle svg Icons enthält. Auf Ubuntu, mit Font Custom , konnte ich generieren Svg-Dateien als Eingabe, die Schriftarten-Datei, auch wenn ich nicht wirklich zufrieden bin. Aber außerdem verstehe ich nicht, wie man diese Dateien mit font-awesome verschmelzen .
Also zusammenfassend, wie kann ich mein eigenes Font-awesome Set erstellen, indem ich meine eigenen Svg-Dateien verwende?
Bitte sagen Sie nicht fontello , icoMoon oder Ähnliches, weil ich gerne auf meinem lokalen Rechner ohne fremde Dienste arbeiten würde.
Ich habe tatsächlich etwas Ähnliches gemacht, aber ich muss zugeben, dass es nie perfekt war, wahrscheinlich wegen schlechter Konvertierung von Schriften, ich hatte nie genug Zeit, es perfekt zu machen. Grundsätzlich habe ich den folgenden Link (zum größten Teil) verwendet:
Ein Überblick über den Prozess
Schritt 1 - Erstellen Sie die einzelnen Gylphs (Sie sollten die Sonderzeichen verwenden, um zu vermeiden, dass jemand mit Ihrer Schriftart "tippt".)
Schritt 2 - Speichern Sie die gylphs-Auswahl als SVG-Schriftart.
Schritt 3 - SVG-Schriftart in Web-Schriftart konvertieren (es gibt viele kostenlose Online-Konverter)
Schritt 4 - Erzeuge die zu verwendenden CSS-Klassen (erstelle alle möglichen Klassen für alle individuellen Glyphen) - das Ergebnis sollte etwa lauten: "icon icon-lg icon-blue icon-hand" - (besser mit LESS / SCSS für diesen Teil - Sie bekommen später warum) wo einer die allgemeinen Einstellungen für alle Icons enthält, der andere die Size-Overrides steuert, steuert einer die Farbe, und am wichtigsten ist der folgende: after - & gt; gibt das Symbol aus.
Schritt 5 - Jetzt, da Sie über eine funktionierende Webschrift verfügen, die von CSS gesteuert wird, erstellen Sie eine Benutzeroberfläche zum Auswählen einzelner Glyphen, die verfügbar sein sollen. Wahrscheinlich sollten Sie LESS verwenden, damit Sie nur die vom Benutzer ausgewählten Klassen "belichten" (z. B. - Icon-1, 2, 5, 8 usw.) alle anderen Icons sind immer noch in der Schriftart enthalten, aber ihre entsprechenden CSS-Klassen werden im endgültigen CSS nicht ausgegeben.
Es könnte weitere Möglichkeiten geben, aber diese Übersicht und das Tutorial sollten Ihnen helfen, die Grundlagen zu bekommen.
Ich glaube, dass Sie FontLab Studio dafür verwenden können: Ссылка
Allerdings werden Sie wahrscheinlich Ihre eigene CSS schreiben müssen, persönlich denke ich, es mit icomoon oder ähnlichen webbasierten Generatoren zu erzeugen, ist viel einfacher und schneller, weil es speziell für die Erstellung von Web-Schriften vor FontLab Studio oder ähnlichen Desktops gemacht wird Anwendungen wurden gemacht, um Desktop-Schriftarten zu entwerfen und nicht mit vorgefertigten css-Compiler / Generator zu kommen.
Ich möchte auch einen Generator für den Desktop sehen.
Ich habe nicht tief genug mit eigenen Font-Icon-Sets gegraben, aber ich nehme an, dass einige SVG-Daten verwendet werden.
Genau wie eine Idee von einer anderen Art zu gehen - Sie könnten sogar Hintergrund-Img auf festgelegten Klassen verwenden: vor /: nach
nützliche Ressource: Ссылка Ich finde ihre Daten-URL-Generation ist nützlich (bessere Svg-Konvertierung als Fontello, icoMoon)
Tags und Links html css svg fonts font-awesome