Fügen Sie benutzerdefinierte Symbole zur Schriftart awesome hinzu

138

Ich liebe die Font Awesome- Symbolschrift und möchte sie für die meisten Symbole auf meiner Website verwenden, aber es gibt ein paar benutzerdefinierte SVG-Symbole, die ich zusätzlich zu den angebotenen Symbolen benötigen würde.

Mir ist aufgefallen, dass die .svg-Version von Font Awesome hauptsächlich aus folgenden <glyph />Elementen besteht:

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

Wäre es effektiv, meinen SVG-Symbolcode zu nehmen, ihn als neues Glyphenelement einzufügen und ein nicht verwendetes Unicode-Zeichen zuzuweisen?

Christian Schlensker
quelle
2
Hast du eine Lösung gefunden? oder hast du einfach ein anderes stecken gewählt?
Michel Ayres
1
Link für '.svg-Version von Font Awesome' nicht gefunden. Bitte aktualisieren.
Yannis Dran
2
Hier ist die relevante Dokumentation: github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome
Rimian

Antworten:

125

Probieren Sie Icomoon aus . Sie können Ihre eigenen SVGs hochladen, sie der Bibliothek hinzufügen und dann eine benutzerdefinierte Schriftart erstellen, die FontAwesome mit Ihren eigenen Symbolen kombiniert.

davidtheclark
quelle
Danke :) Das hilft sehr!
Johnny Zhao
Hervorragender Service. Dank dafür. Generierte ein benutzerdefiniertes Icon-Set aus SVGs in kürzester Zeit.
Nodoze
Gutes Werkzeug. Perfekt. :)
Christian Mark
2
Hallo, ich habe Schriftsymbole mit einem Ordner generiert, der SVG-Symbole enthält. Aber später möchte ich ein einzelnes Symbol hinzufügen. Ist es möglich, hinzuzufügen? oder wieder muss ich mit dem ordner generieren?.
Varadha31590
21

In Font Awesome 5 können Sie benutzerdefinierte Symbole mit Ihren eigenen SVG-Daten erstellen. Hier ist ein Demo-GitHub-Repo , mit dem du spielen kannst. Und hier ist ein CodePen , der zeigt, wie etwas Ähnliches in <script>Blöcken gemacht werden kann.

In beiden Fällen müssen Sie lediglich library.add()ein Objekt wie das folgende hinzufügen:

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

Beachten Sie, dass das Element, das im Codebeispiel mit dem Kommentar "svg path data" gekennzeichnet ist, als Wert des dAttributs für ein <path>Element zugewiesen wird, das ein untergeordnetes Element von ist <svg>. So (einige Details aus Gründen der Klarheit weglassen):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

(Angepasst an meine ähnliche Antwort hier: https://stackoverflow.com/a/50338775/4642871 )

mwilkerson
quelle
Was ist, wenn wir die Standardpräfixe verwenden möchten, damit das neue SVG in die Website passt?
Norbert Kardos
1
Sie können ein beliebiges Präfix verwenden. Aber wenn Sie einen Standard - Präfix verwenden ( fab, fas,far , fal) werden Sie ein höheres Risiko für eine Namensgebung seines konflikt wenn nicht jetzt, dann vielleicht in der Zukunft , wie wir Symbole mit den Standard - Präfixen weiter hinzuzufügen. Durch die Verwendung eines benutzerdefinierten Präfixes wird die Wahrscheinlichkeit, dass ein SVG "in die Website passt", nicht geringer - aber ich bin mir nicht sicher, was Sie mit diesem Satz meinen. Vielleicht könnten Sie das klarstellen?
Mwilkerson
Wir benötigen ein bestimmtes soziales Markensymbol (mit mehr als 200 Millionen Nutzern), das bereits angefordert wurde. Wir möchten dieses SVG-Symbol zur Pro-Version hinzufügen, um es auf einer Website zu verwenden, ohne dass HTML- / CSS-Ausnahmen / else-Fälle auftreten. Alle anderen Marken haben bereits Symbole, so dass die Fab-Klasse auf den Elementen vorhanden ist (und die tatsächlich ausgewählte Marke wird dinamycally zum CSS hinzugefügt)
Norbert Kardos
1
Ja, das funktioniert gut, wenn Sie das Standardpräfix verwenden, um Ihr benutzerdefiniertes Symbol hinzuzufügen. Denken Sie daran, dass es zu einem Konflikt kommt, wenn der Name des Symbols mit dem übereinstimmt, den wir später zu diesem Präfix hinzufügen. Wählen Sie also vielleicht einen Symbolnamen, bei dem es unwahrscheinlich ist, dass Konflikte auftreten? Forked CodePen zur Demonstration: codepen.io/fontawesome/pen/pZWXYX
mwilkerson
Mein SVG stammte aus einer Adobe AI-Datei und hatte mehrere Pfade. Dies hat mich daran gehindert, den oben angegebenen "d" -Parameter richtig einzustellen. Ich musste zuerst die AI-Datei in einen zusammengesetzten Pfad konvertieren, bevor ich sie als SVG exportierte. Ich habe hier gelernt, wie das geht: Graphicdesign.stackexchange.com/questions/35054/…
Alex Standiford
18

Kommt darauf an was du hast. Wenn Ihr SVG-Symbol nur ein Pfad ist, können Sie diese Glyphe einfach hinzufügen, indem Sie einfach das Attribut 'd' in ein neues <glyph> -Element kopieren. Der Pfad muss jedoch auf das Koordinatensystem der Schriftart skaliert werden (das EM-Quadrat, das normalerweise [0,0,2048,2048] ist - der Standard für Truetype-Schriftarten) und an der gewünschten Grundlinie ausgerichtet sein.

Nicht alle Browser unterstützen jedoch SVG-Schriftarten. Sie müssen sie daher auch in andere Formate konvertieren, wenn sie überall funktionieren sollen.

Fontforge kann SVG- Dateien importieren (wählen Sie einen Glyphensteckplatz, Datei> Importieren und dann Ihr SVG-Bild) und anschließend in alle relevanten Schriftformate (SVG, Truetype, Woff usw.) konvertieren.

Erik Dahlström
quelle
18

Ich empfehle, Ihre Symbole von FontAwesome zu trennen und eine eigene benutzerdefinierte Bibliothek zu erstellen und zu verwalten. Persönlich denke ich, dass es viel einfacher ist, FontAwesome beizubehalten getrennt wenn Sie Ihre eigene erstellen. Sie können dann FontAwesome von einem CDN auf Ihre Website laden lassen und müssen sich nie darum kümmern, sie auf dem neuesten Stand zu halten.

Wenn Sie Ihre eigenen benutzerdefinierten Symbole erstellen, erstellen Sie jedes Symbol mit Adobe Illustrator oder einer ähnlichen Software. Sobald Ihre Symbole erstellt wurden, speichern Sie sie einzeln im SVGFormat auf Ihrem Computer.

Besuchen Sie als Nächstes IcoMoon : http://icomoon.io , das (meiner Meinung nach) die beste Software zum Generieren von Schriftarten bietet und kostenlos ist. IcoMoon ermöglicht es Ihnen , Ihre individuellen svg-gespeicherten Schriftarten in eine Schriftbibliothek zu importieren, dann benutzerdefinierte Symbol Glyphe Bibliothek erzeugen in eot, ttf, woff, und svg. Ein Format, das IcoMoon nicht generiert, ist woff2.

Nachdem Sie Ihr Icon Pack bei IcoMoon erstellt haben , gehen Sie zu FontSquirrel : http://fontsquirrel.com und verwenden Sie deren Schriftgenerator. Verwenden Sie Ihre ttfbei IcoMoon generierte Datei . In dem neu erstellten Icon Pack haben Sie jetzt Ihr Icon Pack im woff2Format.

Stellen Sie sicher , die Dateien für eot, ttf, svg, woff, undwoff2 sind alle den gleichen Namen. Sie generieren ein Icon Pack aus zwei verschiedenen Websites / Software, die ihre generierte Ausgabe unterschiedlich benennen.

An beiden Standorten wird CSS für Ihr Icon Pack generiert. Das bei IcoMoon generierte CSS enthält das woff2Format jedoch nicht in Ihrer @font-face {}Deklaration. Stellen Sie sicher, dass Sie Folgendes hinzufügen, wenn Sie Ihr CSS zu Ihrem Projekt hinzufügen:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Beachten Sie, dass Sie mit der IcoMoon- Software die Glyphen-Unicode-Werte der einzelnen Symbole in Ihrem Symbolpaket abrufen können . Diese Werte können hilfreich sein, um Ihre Symbole über CSS zuzuweisen, wie in (vorausgesetzt, wir verwenden die font-familyim @font-face {...}obigen Beispiel deklarierten ):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

Sie können den Glyphen-Unicode-Wert auch abrufen, e953wenn Sie die vom Schriftpaket generierte svgDatei in einem Texteditor öffnen . Z.B:

<glyph unicode="&#xe953;" glyph-name="eye" ... />
Pegues
quelle
funktioniert nicht ,.,.
Schließen Sie
1
Können Sie bitte etwas näher darauf eingehen? Gerne helfe ich Ihnen bei Ihrem Problem. Haben Sie font-family: customiconpack;mit Ihrem angegeben selector:after? Lassen Sie mich jetzt meine Lösung für das selector:afterCodebeispiel aktualisieren .
Pegues
ich habe die my icon svg datei hochgeladen ,. Ich habe die Datei heruntergeladen., Ich habe diese in das Projekt eingefügt. Neue CSS-Datei in das Projekt einfügen. Ihren Code in die Datei kopiert. Den Code mit meinem Symbolcode geändert. hat nicht funktioniert ,.
Inzmam ul Hassan
1
Bitte nehmen Sie an den Chat - Raum Ich habe so das Problem leichter diskutieren: chat.stackoverflow.com/rooms/132402/...
Pegues
2
Ich kommentiere hier nur, um andere wissen zu lassen, dass das Problem darin bestand, dass Sie Ihre SVG in Illustrator aus einem importierten PNG erstellt haben. Sie müssen Ihr Symbol als Vektor neu erstellen. PNG ist ein Rasterformat und hat keine Vektorkurven.
Pegues
13

Ähnliche Herangehensweise an @ Samuel-bergström:

  • Laden Sie Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg herunter
  • Laden Sie FontForge http://fontforge.github.io/en-US/downloads/ herunter.
  • Laden Sie Inkscape herunter
  • Öffnen Sie Inskscape und erstellen Sie eine einzelne Ebenenform als neues Schriftsymbol
  • SVG-Datei speichern, Inkscape schließen
  • Öffnen Sie FontForge (Wenn Sie mehrere Monitore haben, verwenden Sie Windows-LeftArrow, um sie neu zu positionieren, da sie seltsame SWING-Java-Fenster haben, die vom Monitor verschwinden und modale Probleme mit Popups haben. Ich musste meine Taskleiste auf einige überprüfen.)
  • Datei | Öffnen Sie fontawesome-webfont.svg
  • Datei | Importieren
  • Scrollen Sie nach unten und klicken Sie mit der rechten Maustaste auf Symbol | Glypheninfo
  • Aktualisieren Sie den Glyphennamen auf uniFXXX (XXX ist ungefähr 501, eine höhere Zahl als der höchste in Version 4.5 von FontAwesome verwendete Unicode)
  • Unicode Vlaue U + fXXX
  • OK klicken
  • Datei | sparen
  • Datei | Schriftarten generieren ...
  • Schließen Sie FontForge
  • Öffnen Sie Ihr Webprojekt
  • Kopieren Sie Ihre Schriftdateien in den Ordner "\ Content \ fonts \" (in meinem Projekt).
  • Bearbeiten Sie "\ Content \ styles \ fa \ path.less" wie folgt:

@font-face {
      font-family: 'FontAwesome';
      //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
      src: 
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

Ich weiß, dass es "umstritten" sein kann, andere Dateitypen zu kommentieren, bin aber froh zu hören, wie man in den Kommentaren .eot- oder .otf-Dateien generiert.

  • und schließlich, wie Samuel erwähnt, aktualisieren Sie Ihr CSS / WENIGER mit:

    .fa-XXX: vor {content: "\ f501"; }}

OzBob
quelle
3

Ich habe mich ein wenig mit SVG-Webfonts und der Erstellung von Schriftarten befasst. Wenn Sie in meinen Augen Schriftarten zu bereits vorhandenen Schriftarten hinzufügen möchten, müssen Sie Folgendes tun:

Gehen Sie zu inkscape und erstellen Sie eine Glyphe. Speichern Sie sie als SVG, damit Sie den Code lesen können. Stellen Sie sicher, dass Sie ihr ein Unicode-Zeichen zuweisen, das derzeit nicht verwendet wird, damit keine Konflikte mit den vorhandenen Glyphen in der Schriftart auftreten. Dies könnte schwierig sein, daher denke ich, dass ein besserer, einfacherer Ansatz darin besteht, eine vorhandene Glyphe durch eine eigene zu ersetzen (wählen Sie einfach eine aus, die Sie nicht verwenden, und kopieren Sie den ersten Teil:

Speichern Sie das SVG und konvertieren Sie es mit einem beliebigen Online-Konverter in eine Web-Schriftart, damit Ihre Webfont in allen Browsern funktioniert.

Sobald dies erledigt ist, sollten Sie entweder eine SVG mit einem der Glyphen ersetzen lassen. In diesem Fall sind Sie fertig. Wenn nicht, müssen Sie das CSS für Ihre neue Glyphe erstellen. Versuchen Sie in diesem Fall, das vorhandene CSS für FAs wiederzuverwenden, und fügen Sie nur hinzu

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}
Samuel Bergström
quelle
2

Wenn Sie einige Symbole (oder alle) von font-awesome möchten, einschließlich Ihrer benutzerdefinierten SVG-Symbole, können Sie:

1- Gehen Sie zu http://fontawesome.io/. Laden Sie die Zip- Datei herunter und extrahieren Sie sie beispielsweise auf Ihrem Desktop.

2- Gehen Sie zu http://fontastic.me/ und erstellen Sie mit Ihrer E-Mail-Adresse ein Konto.

3- Sobald Sie angemeldet sind, klicken Sie auf die Kopfzeilenoption: Weitere Symbole hinzufügen.

4- Wählen Sie die SVG von font-awesome aus, die sich in Ihrer extrahierten Zip-Datei in Schriftarten befindet.

5- Wiederholen Sie den Vorgang zum Hochladen Ihrer eigenen SVG-Dateien.

6- Inside Home (in der Kopfzeile der Seite) Wählen Sie die Symbole aus, die Sie herunterladen möchten, passen Sie sie an Ihre benutzerdefinierten Namen an und wählen Sie "Veröffentlichen", um einen Link zu erhalten, oder laden Sie die Schriftarten und CSS herunter.

Entschuldige mein Englisch ! : D.

CarLoOSX
quelle
Das wird funktionieren, aber ich denke, es ist besser, eine eigene benutzerdefinierte Symbolbibliothek zu erstellen und die Seite von fontawesome zu verwenden. Dadurch kann die Schriftart aktualisiert werden (mit neuen Symbolen).
Guillaume Harari