web-dev-qa-db-fra.com

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

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

J'ai remarqué que le =. Svg version de Font Awesome est composé principalement de ces éléments <glyph />:

...
<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 de glyphe et d'attribuer un caractère Unicode inutilisé?

svgwebfontsfont-awesome
129
Christian Schlensker

Donnez Icomoon un essai. Vous pouvez télécharger vos propres fichiers SVG, les ajouter à la bibliothèque, puis créer une police personnalisée associant FontAwesome à vos propres icônes.

118
davidtheclark

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

33
Glen

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

Cependant, tous les navigateurs ne supportent pas les polices svg, vous devrez donc également les convertir en d'autres formats si vous voulez que cela fonctionne partout.

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

17
Erik Dahlström

Je suggère de garder vos icônes séparées de FontAwesome et créez et maintenez votre propre bibliothèque personnalisée. Personnellement, je pense qu’il est beaucoup plus facile de maintenir FontAwesome Séparez si vous allez créer votre propre bibliothèque d’icônes. Vous pouvez ensuite charger FontAwesome sur votre site à partir d'un CDN sans 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 format SVG sur votre ordinateur.

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

Après avoir généré votre pack d'icônes à IcoMoon, dirigez-vous vers FontSquirrel: http://fontsquirrel.com et utilisez leur générateur de polices. Utilisez votre fichier ttf généré à IcoMoon. Dans le nouveau pack d'icônes généré, votre pack d'icônes sera désormais au format woff2.

Assurez-vous que les fichiers pour eot, ttf, svg, woff et woff2 portent tous 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 CSS généré pour votre pack d'icônes aux deux endroits. Mais le CSS généré à IcoMoon n'inclura pas le format woff2 dans votre déclaration @font-face {}. 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;
}

N'oubliez pas que vous pouvez obtenir les valeurs unicode de glyphe de chaque icône de votre pack d'icônes à l'aide de la commande IcoMoon Logiciel. Ces valeurs peuvent être utiles pour affecter vos icônes via CSS, comme dans (supposons que nous utilisions le font-family déclaré dans l'exemple @font-face {...} ci-dessus):

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

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

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

Approche similaire à @ Samuel-bergström:

  • Télécharger Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
  • Télécharger FontForge http://fontforge.github.io/en-US/downloads/
  • Télécharger Inkscape
  • Ouvrez Inskscape et créez une seule forme de calque en tant que 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 des problèmes de mode avec les fenêtres contextuelles. J'ai dû vérifier ma barre de tâches )
  • Fichier | Ouvrez fontawesome-webfont.svg
  • Fichier | Importation
  • Faites défiler vers le bas, clic droit sur l'icône | Info sur le glyphe
  • Mettez à jour le nom du glyphe vers uniFXXX (XXX est quelque chose comme 501, un nombre plus élevé que le plus haut Unicode utilisé dans la version 4.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 "\ Content\fonts \" (de mon projet).
  • Modifiez "\ Content\styles\fa\path.less" comme suit:
@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 je suis heureux de savoir comment générer des fichiers .eot ou .otf dans les commentaires.

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

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

13
OzBob

Dans Font Awesome 5, vous pouvez créer des icônes personnalisées avec vos propres données SVG. Voici un démo GitHub repo avec lequel vous pouvez jouer. Et voici un CodePen qui montre comment faire quelque chose de similaire dans les blocs <script>.

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 attribué à la valeur de l’attribut d sur un élément <path> qui est un enfant du <svg>. Comme ceci (en laissant de côté certains 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 )

10
mwilkerson

J'ai effectué des recherches sur les polices Web SVG et la création de polices. À mes yeux, si vous souhaitez "ajouter" des polices à une police déjà existante, vous devez effectuer les opérations suivantes:

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

Enregistrez le fichier 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 que cela est fait, vous devriez avoir soit un SVG avec l'un des glyphes remplacés, auquel cas vous avez terminé. sinon, vous devez créer le CSS pour votre nouveau glyphe. Dans ce cas, essayez de réutiliser les CSS existantes 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)
>}
3
Samuel Bergström

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

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

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

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

4- Sélectionnez le fichier SVG de font-awesome situé dans vos polices Zip inside extraites.

5- Répétez la procédure en téléchargeant vos propres fichiers svg.

6- Inside Home (en-tête de la page) Sélectionnez les icônes à télécharger, personnalisez-les pour leur attribuer des noms personnalisés, puis choisissez Publier pour créer un lien ou téléchargez les polices et les CSS.

Désolé de mon anglais ! :RÉ

1
CarLoOSX