Dev Faq
9
votes

Construire des icônes géniales de police

Je construirais mon propre jeu d'icônes de police-génial. En particulier, je construirais quelque chose qui est une copie de la police-génère avec toutes ses caractéristiques, mais en utilisant juste un sous-ensemble d'icônes.

En outre, je suis vraiment intéressé comment ils construisent des fichiers dans les dossiers polices . Sur GitHub, j'ai trouvé ce repo , qui contient toutes les icônes svg . Sur Ubuntu, en utilisant personnalisé personnalisé , j'ai pu générer des fichiers SVG en entrée, le fichier de polices, même si je ne suis pas vraiment satisfait. Mais à part ça, je ne comprends pas comment fusionner ces fichiers avec font-génial.

résumer, comment puis-je créer mon propre ensemble de polices-génial, à l'aide de mes propres fichiers SVG?

S'il vous plaît, ne dites pas d'utiliser FonTello , Icomoon ou similaire, car j'aimerais faire sur ma machine locale, sans aucun service tiers.

0 commentaires

3 Réponses :

0
votes

Je pense que vous pouvez utiliser FontLab Studio pour cela: http://store.fontlab.com/ < / p>

Cependant, vous devrez probablement écrire votre propre CSS, personnellement, je pense que le générer avec l'ICOMOON ou le générateur Web similiaire est beaucoup plus facile et plus rapide, car il est fabriqué en particulier pour générer des polices Web, avant avant le Studio Fontlab ou le bureau SIMILIAR Des applications ont été faites pour concevoir des polices de bureau et ne viennent pas avec le compilateur / générateur CSS précieux.

J'aimerais voir un générateur pour le bureau ASWELL.

0 commentaires
2
votes

J'ai fait quelque chose de similaire mais je dois admettre que cela n'a jamais été parfait, probablement en raison de la conversion de mauvaise police, il n'a jamais eu le temps de le rendre parfait. Fondamentalement, j'ai utilisé le lien suivant (dans la plupart des parties)

http: //www.webdesignerdepot .COM / 2012/01 / HOW-TOT-Make-Your-icon-webfont /

aperçu du processus

étape 1 - Créez les gylfs individuels (vous devez utiliser les caractères spéciaux pour éviter que quelqu'un "en tapant" en utilisant votre police.

étape 2 - sauvegarder la sélection des gylphs en tant que police SVG.

étape 3 - convertir la police SVG en polices Web (il existe de nombreux convertisseurs en ligne gratuits)

étape 4 - Générez les classes CSS à utiliser (créer toutes les classes possibles pour tous les glyphes individuels) - le résultat devrait être quelque chose comme: "icône icon-lg icon-icon-main" - (Mieux en utilisant moins / SCSS pour cette partie - vous obtiendrez pourquoi plus tard) Lorsque l'on contient les réglages généraux de toutes les icônes, les autres contrôles de la taille de la taille, on contrôle la couleur et la plus importante que l'utilisation de: après -> sortira l'icône.

Étape 5 - Maintenant que vous avez une police Web de travail contrôlée par CSS, faites une interface utilisateur pour sélectionner des glyphes individuels à être disponibles. Très probablement, vous devez utiliser moins, de cette façon que vous soyez "exposant" uniquement les classes sélectionnées par l'utilisateur (par exemple, icon-1, 2, 5, 8, etc.) Toutes les autres icônes sont encore incluses dans la police mais leur correspondance Les classes CSS ne sont pas émises dans la finale CSS.

Il pourrait y avoir des moyens plus avancés de le faire, mais cet aperçu et un tutoriel devraient vous aider à obtenir les bases.

1 commentaires

Juste remarqué, Étape 1 - Utilisez Inkscape, ils ont un bon éditeur open source, Fontlab n'est pas aussi utilisable ni gratuitement. En plus de cela, une explication plus "complète" pourrait être trouvée dans le lien que j'ai attaché.

0
votes

Je n'ai pas profondément creusé avec de propres séries de polices-icon, mais je suppose qu'il y a des données SVG à utiliser.

Tout comme une idée d'une autre façon d'aller, vous pouvez même utiliser des classes de fond-img sur des classes de jeu: avant /: après

ressource utile: http://iconizr.com/ Je trouve que leur génération d'URL de données est utile (mieux SVG Conversion que Fontello, Icomoon)

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor