Ajouter des icônes personnalisées à la police géniale

J'adore la police d' icônes Font Awesome et je souhaite l'utiliser pour la plupart des icônes de mon site, mais il y a quelques icônes svg personnalisées dont j'aurais besoin en plus de ce qui est offert.

J'ai remarqué que la version .svg de Font Awesome est principalement composée de ces <glyph />éléments:

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

Serait-il efficace de prendre mon code d'icône svg, de le coller en tant que nouvel élément glyphe et d'attribuer un caractère unicode inutilisé?

Essayez Icomoon . Vous pouvez télécharger vos propres SVG, les ajouter à la bibliothèque, puis créer une police personnalisée combinant FontAwesome avec vos propres icônes.

Vous pouvez essayer fontcustom , il crée votre propre police à partir de fichiers svg.

Dans Font Awesome 5, vous pouvez créer des icônes personnalisées avec vos propres données SVG. Voici un dépôt de démonstration GitHub avec lequel vous pouvez jouer. Et voici un CodePen qui montre comment quelque chose de similaire peut être fait en <script>blocs.

Dans les deux cas, il s'agit simplement d'utiliser library.add()pour ajouter un objet comme celui-ci:

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

Notez que l'élément étiqueté par le commentaire "svg path data" dans l'exemple de code est ce qui sera assigné comme valeur de l' dattribut sur un <path>élément qui est un enfant de <svg>. Comme ceci (en laissant de côté quelques détails pour plus de clarté):

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

(Adapté de ma réponse similaire ici: https://stackoverflow.com/a/50338775/4642871 )

Je suggère de garder vos icônes séparées de FontAwesome et de créer et de maintenir votre propre bibliothèque personnalisée. Personnellement, je pense qu'il est beaucoup plus facile de garder FontAwesome séparé si vous allez créer votre propre bibliothèque d'icônes. Vous pouvez ensuite charger FontAwesome sur votre site à partir d'un CDN et ne jamais avoir à vous soucier de le maintenir à jour.

Lorsque vous créez vos propres icônes personnalisées, créez chaque icône via Adobe Illustrator ou un logiciel similaire. Une fois vos icônes créées, enregistrez-les individuellement au SVGformat sur votre ordinateur.

Ensuite, rendez-vous sur IcoMoon : http://icomoon.io , qui possède le meilleur logiciel de génération de polices (à mon avis), et c'est gratuit. IcoMoon vous permettra d'importer vos polices individuelles sauvegardées svg-dans une bibliothèque de police, puis générer votre bibliothèque glyphe icône personnalisée dans eot, ttf, woffet svg. Un format que IcoMoon ne génère pas est woff2.

Après avoir généré votre pack d'icônes chez IcoMoon , rendez -vous sur FontSquirrel : http://fontsquirrel.com et utilisez leur générateur de polices. Utilisez votre ttffichier généré chez IcoMoon . Dans le pack d'icônes nouvellement généré créé, vous aurez maintenant votre pack d'icônes au woff2format.

Assurez - vous que les fichiers pour eot, ttf, svg, woffet woff2sont tout le même nom. Vous générez un pack d'icônes à partir de deux sites Web / logiciels différents, et ils nomment leur sortie générée différemment.

Vous aurez du CSS généré pour votre pack d'icônes aux deux emplacements. Mais le CSS généré à IcoMoon n'inclura pas le woff2format dans votre @font-face {}déclaration. Assurez-vous de l'ajouter lorsque vous ajoutez votre CSS à votre projet:

@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;
}

Gardez à l'esprit que vous pouvez obtenir les valeurs unicode des glyphes de chaque icône de votre pack d'icônes à l'aide du logiciel IcoMoon . Ces valeurs peuvent être utiles pour attribuer vos icônes via CSS, comme dans (en supposant que nous utilisons le font-familydéclaré dans l'exemple @font-face {...}ci-dessus):

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

Vous pouvez également obtenir la valeur unicode du glyphe e953si vous ouvrez le svgfichier généré par le pack de polices dans un éditeur de texte. Par exemple:

<glyph unicode="&#xe953;" glyph-name="eye" ... />

Cela dépend de ce que vous avez. Si votre icône svg est juste un chemin, alors il est assez facile d'ajouter ce glyphe en copiant simplement l'attribut 'd' dans un nouvel élément <glyph>. Cependant, le chemin doit être mis à l'échelle selon le système de coordonnées de la police (le carré EM, qui est généralement [0,0,2048,2048] - la norme pour les polices Truetype) et aligné sur la ligne de base souhaitée.

Cependant, tous les navigateurs ne prennent pas en charge les polices svg, vous devrez donc également les convertir dans d'autres formats si vous voulez qu'il fonctionne partout.

Fontforge peut importer des fichiers svg (sélectionnez un emplacement de glyphe, Fichier> Importer puis sélectionnez votre image svg), et vous pouvez ensuite les convertir dans tous les formats de polices appropriés (svg, truetype, woff, etc.).

Approche similaire à @ Samuel-bergström:

• Téléchargez Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• Téléchargez FontForge http://fontforge.github.io/en-US/downloads/
• Télécharger Inkscape
• Ouvrez Inskscape et créez une forme de calque unique comme nouvelle icône de police
• Enregistrer le fichier SVG, fermer Inkscape
• Ouvrez FontForge (Si vous avez plusieurs moniteurs, utilisez Windows-LeftArrow, pour les repositionner car ils ont d'étranges fenêtres SWING java qui s'éteignent et ont des problèmes modaux avec les popups - j'ai dû vérifier ma barre des tâches pour certains)
• Fichier | Ouvrez fontawesome-webfont.svg
• Fichier | Importer
• Faites défiler vers le bas, faites un clic droit sur l'icône | Informations sur le glyphe
• Mettez à jour le nom du glyphe en uniFXXX (XXX est quelque chose comme 501, un nombre plus élevé que le plus haut Unicode utilisé dans la v4.5 de FontAwesome)
• Unicode Vlaue U + fXXX
• Cliquez sur OK
• Fichier | sauver
• Fichier | Générer des polices ...
• Fermer FontForge
• Ouvrez votre projet Web
• Copiez vos fichiers de polices dans le dossier (dans mon projet) "\ Content \ fonts \".
• Modifiez "\ Content \ styles \ fa \ path.less" pour qu'il ressemble à:

@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;
    }

Je sais qu'il peut être «controversé» de commenter d'autres types de fichiers, mais heureux d'entendre comment générer des fichiers .eot ou .otf dans les commentaires.

• et enfin, comme Samuel le mentionne, mettez à jour votre CSS / LESS avec:

  .fa-XXX: avant {contenu: "\ f501"; }

J'ai fait quelques recherches sur les polices Web SVG et la création de polices, à mes yeux, si vous voulez "ajouter" des polices à une police déjà existante, vous devez faire ce qui suit:

allez dans inkscape et créez un glyphe, enregistrez-le au format SVG pour pouvoir lire le code, assurez-vous de lui attribuer un caractère unicode qui n'est pas actuellement utilisé afin qu'il n'entre en conflit avec aucun des glyphes existants dans la police. cela pourrait être difficile donc je pense qu'une meilleure approche plus simple serait de remplacer un glyphe existant par le vôtre (choisissez simplement celui que vous n'utilisez pas, copiez la première partie:

Enregistrez le svg puis convertissez-le en police Web à l'aide de n'importe quel convertisseur en ligne afin que votre police Web fonctionne dans tous les navigateurs.

une fois cela fait, vous devriez avoir soit un SVG avec l'un des glyphes remplacé, auquel cas vous avez terminé. sinon vous devez créer le CSS pour votre nouveau glyphe, dans ce cas, essayez de réutiliser le CSS existant des FA, et ajoutez seulement

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

Si vous voulez des icônes (ou toutes) de font-awesome, y compris vos icônes svg personnalisées, vous pouvez:

1- Allez sur http://fontawesome.io/ Téléchargez le zip et extrayez-le par exemple sur votre bureau.

2- Allez sur http://fontastic.me/ utilisez votre email pour créer un compte.

3- Une fois que vous êtes connecté, cliquez sur l'option d'en-tête: Ajouter plus d'icônes.

4- Sélectionnez le SVG de font-awesome situé dans votre zip extrait à l'intérieur des polices.

5- Répétez le processus de téléchargement de vos propres fichiers svg.

6- Inside Home (en tête de la page) Sélectionnez les icônes que vous souhaitez télécharger, personnalisez-les pour donner vos noms personnalisés et sélectionnez publier pour avoir un lien ou télécharger les polices et css.

Désolé de mon anglais ! :RÉ