Fügen Sie benutzerdefinierte Symbole zur Schriftart awesome hinzu

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?

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.

Sie können fontcustom ausprobieren , es erstellt Ihre eigene Schriftart aus SVG-Dateien.

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 )

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.

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" ... />

Ä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"; }}

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)
>}

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.