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


138

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é?


2
avez-vous trouvé une solution? ou vous venez de choisir un autre branchement?
Michel Ayres

1
lien pour la «version .svg de Font Awesome» introuvable. Veuillez mettre à jour.
Yannis Dran

Réponses:


125

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.


Merci :) Cela aide beaucoup!
Johnny Zhao

Très bon service. Merci pour ça. Généré un jeu d'icônes personnalisé à partir de svgs en un rien de temps.
Nodoze

Bon outil. Parfait. :)
Christian Mark

2
Salut, j'ai généré des icônes de police avec un dossier contenant des icônes svg. Mais plus tard, je veux ajouter une seule icône à cela, est-il possible d'ajouter? ou encore je dois générer avec le dossier ?.
Varadha31590


21

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 )


Que faire si nous voulons utiliser les préfixes standard pour que le nouveau svg puisse s'intégrer dans le site Web?
Norbert Kardos

1
Vous pouvez utiliser le préfixe de votre choix. Mais si vous utilisez un préfixe standard ( fab, fas, far, fal) vous serez plus à risque d'un conflit si nommage pas maintenant, alors peut - être à l'avenir alors que nous continuons d' ajouter des icônes avec les préfixes standard. L'utilisation d'un préfixe personnalisé ne rendra pas un svg moins susceptible de "s'intégrer au site Web" - mais je ne suis pas sûr de ce que vous entendez par cette phrase, alors peut-être pourriez-vous clarifier?
mwilkerson

Nous avons besoin d'une icône de marque sociale spécifique (avec plus de 200 millions d'utilisateurs), ce qui était déjà demandé. Nous aimerions ajouter cette icône svg à la version pro pour l'utiliser sur un site Web, sans faire d'exceptions html / css / else. Toutes les autres marques ont déjà des icônes, donc la classe fab est présente sur les éléments (et la marque réellement sélectionnée est ajoutée de façon dynamique au css)
Norbert Kardos

1
Oui, cela fonctionnera bien pour utiliser le préfixe standard pour ajouter votre icône personnalisée. Gardez simplement à l'esprit que si le nom de l'icône finit par être le même que quelque chose que nous ajoutons à ce préfixe plus tard, il y aura un conflit. Alors peut-être choisir un nom d'icône qui n'est pas susceptible d'entrer en conflit? Forked CodePen pour démontrer: codepen.io/fontawesome/pen/pZWXYX
mwilkerson

Mon SVG provenait d'un fichier Adobe AI et avait plusieurs chemins. Cela m'a empêché de pouvoir définir correctement le paramètre "d" spécifié ci-dessus. J'ai d'abord dû convertir le fichier AI en un chemin composé avant de l'exporter au format SVG. J'ai appris comment faire cela ici: graphicdesign.stackexchange.com/questions/35054/…
Alex Standiford

19

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

Ca ne fonctionne pas ,.,. terminer tout le processus, juste l'icône n'apparaît pas à la place des chiffres apparaissent
Inzmam ul Hassan

1
Pouvez-vous s'il vous plaît élaborer un peu plus? Je suis heureux de vous aider avec votre problème. Avez-vous précisé font-family: customiconpack;avec votre selector:after? Permettez-moi de mettre à jour ma solution dès maintenant pour l' selector:afterexemple de code.
Pegues

j'ai téléchargé le fichier svg mon icône,. j'ai téléchargé le fichier,., j'ai mis ceux dans le projet ajouter un nouveau fichier css dans le projet copié votre code dans le fichier changé le code avec mon code d'icône,. n'a pas fonctionné,.
Inzmam ul Hassan

1
Veuillez rejoindre ce salon de discussion que j'ai créé afin que nous puissions discuter du problème plus facilement: chat.stackoverflow.com/rooms/132402/…
Pegues

2
Je commente ici juste pour faire savoir aux autres que le problème était que vous avez créé votre SVG dans Illustrator à partir d'un PNG importé. Vous devez recréer votre icône en tant que vecteur. PNG est un format raster et n'a pas de courbes vectorielles.
Pegues

18

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


13

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


3

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

2

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É


Cela fonctionnera, mais je pense qu'il est préférable de créer votre propre bibliothèque d'icônes personnalisée et d'utiliser le côté fontawesome. Cela permettra de mettre à jour fontawesome (avec de nouvelles icônes).
Guillaume Harari
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.