Ajouter des icons personnalisées à la police

J’adore la police de caractères Font Awesome et je souhaite l’utiliser pour la plupart des icons de mon site, mais il y a aussi quelques icons svg personnalisées en plus de celles proposées.

J’ai remarqué que la version .svg de Font Awesome est composée principalement de ces éléments :

 ...    ... 

Serait-il efficace de prendre mon code d’icône svg, de le coller en tant que nouvel élément glyph et d’atsortingbuer un caractère unicode non utilisé?

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

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

Dépend de ce que vous avez Si votre icône svg est juste un chemin, alors il est assez facile d’append ce glyphe en copiant simplement l’atsortingbut ‘d’ dans un nouvel élément . Toutefois, le chemin doit être adapté au système de coordonnées de la police (le carré EM, qui est généralement [0,0,2048,2048] – la norme pour les fonts TrueType) et aligné sur la ligne de base souhaitée.

Cependant, tous les navigateurs ne prennent pas en charge les fonts svg. Vous devrez donc les convertir dans d’autres formats si vous souhaitez 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 pourrez ensuite convertir tous les formats de police appropriés (svg, truetype, woff, etc.).

Une 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 forme de calque unique en tant que nouvelle icône de police
  • Enregistrez le fichier SVG, fermez Inkscape
  • Ouvrez FontForge (Si vous avez plusieurs moniteurs, utilisez Windows-LeftArrow, pour repositionner car ils ont d’étranges fenêtres Java SWING qui disparaissent du moniteur 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, cliquez droit sur l’icône | Informations sur les glyphes
  • Mettre à jour le nom des glyphes 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 | sauvegarder
  • Fichier | Générer des fonts …
  • Fermer FontForge
  • Ouvrez votre projet web
  • Copiez vos fichiers de police dans le dossier (dans mon projet) “\ Content \ fonts \”.
  • Editez “\ Content \ styles \ fa \ path.less” pour ressembler à:
 @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 suggère de garder vos icons séparées de FontAwesome et de créer et gérer votre propre bibliothèque personnalisée. Personnellement, je pense qu’il est beaucoup plus facile de garder FontAwesome séparé si vous voulez créer votre propre bibliothèque d’icons. Vous pouvez ensuite faire en sorte que FontAwesome soit chargé sur votre site à partir d’un CDN et que vous n’ayez jamais à vous soucier de le garder à jour.

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

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

Après avoir généré votre pack d’icons chez IcoMoon , rendez -vous sur FontSquirrel : http://fontsquirrel.com et utilisez leur générateur de fonts. Utilisez votre fichier ttf généré par IcoMoon . Dans le nouveau pack d’icons créé, vous aurez maintenant votre pack d’icons au format woff2 .

Assurez-vous que les fichiers pour eot , ttf , svg , woff et woff2 ont tous le même nom. Vous générez un pack d’icons à partir de deux sites Web / logiciels différents, et leur nom est généré différemment.

Vous aurez généré CSS pour votre pack d’icons aux deux endroits. Mais le CSS généré sur IcoMoon n’inclura pas le format woff2 dans votre déclaration @font-face {} . Assurez-vous d’append cela 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 dans votre pack d’icons à l’aide du logiciel IcoMoon . Ces valeurs peuvent être utiles pour atsortingbuer vos icons via CSS, comme dans (en supposant que nous utilisons la font-family déclarée dans l’exemple @font-face {...} ci-dessus):

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

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

  

Dans Font Awesome 5, vous pouvez créer des icons personnalisées avec vos propres données SVG. Voici un repo de démonstration GitHub avec lequel vous pouvez jouer. Et voici un CodePen qui montre comment quelque chose de similaire pourrait être fait dans les blocs .

Dans les deux cas, il suffit d'utiliser library.add() pour append un object 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: ssortingng, iconName: ssortingng, // Any name you like icon: [ number, // width number, // height ssortingng[], // ligatures ssortingng, // unicode (if relevant) ssortingng // svg path data ] } 

Notez que l'élément étiqueté par le commentaire "svg path data" dans l'échantillon de code est ce qui sera assigné comme valeur de l'atsortingbut d sur un élément qui est un enfant du . Comme ça (en laissant de côté certains détails pour plus de clarté):

    

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

J’ai un peu étudié les webfonts SVG et la création de fonts, à mes yeux, si vous voulez “append” des fonts à des fonts déjà existantes, faites ce qui suit:

allez dans inkscape et créez un glyphe, enregistrez-le en tant que SVG pour pouvoir lire le code, assurez-vous de lui atsortingbuer un caractère unicode qui n’est pas utilisé actuellement pour qu’il ne soit en conflit avec aucun des glyphes de 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 en utilisant n’importe quel convertisseur en ligne afin que votre site Web fonctionne dans tous les navigateurs.

Une fois cela 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) >} 

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

1- Allez sur http://fontawesome.io/ Téléchargez le fichier 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 connecté, cliquez sur l’en-tête: Ajouter des icons.

4- Sélectionnez le SVG de font-awesome situé dans vos fonts zip extraites.

5- Répétez les processus en téléchargeant vos propres fichiers svg.

6- Inside Home (à l’en-tête de la page) Sélectionnez les icons 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 fonts et les CSS.

Désolé de mon anglais ! :RÉ