Optimiser Font Awesome uniquement pour les classes utilisées

J'utilise le fichier Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass pour le rendre _font-awesome.sass afin que je puisse @importdans mon projet Sass. J'utilise également http://middlemanapp.com/ pour convertir Sass en Css . Des questions:

1. Existe-t-il un moyen de n'apporter que les classes d'icônes utilisées dans mon .css converti? Parce que pour le moment, il transportait toutes les classes de _font-awesome.sass

2. BONUS: Est-il possible de recompiler les polices d'une manière ou d'une autre avec des classes d'icônes utilisées pour les réduire en production?

Si je peux obtenir quelques conseils sur le n ° 1 ci-dessus, ce serait assez génial.

Merci.

Sass n'a aucune idée des classes que vous utilisez réellement. C'est quelque chose que vous devrez vous-même couper manuellement. Ouvrez le fichier .scss fourni et piratez tout ce dont vous n'avez pas besoin.

La modification du fichier de police lui-même pour éliminer les glyphes inutiles nécessite une application tierce pour le faire et dépasse le cadre de cette question.

Fontello est un service Web en ligne qui peut faire tout cela pour vous. Il vous permet de mélanger et de faire correspondre plusieurs collections de polices d'icônes pour créer le fichier de polices parfait pour votre projet. En plus du fichier de police personnalisé, il fournit plusieurs fichiers .css contenant des styles déjà générés pour vous (changer l'extension en .scss vous permettra de les importer dans votre projet Sass existant).

fontello est très bon mais IcoMoon est encore plus génial.

Vous pouvez désormais sous-définir les icônes de Font-awesome pour une utilisation en production. Il existe maintenant un outil de sous- paramétrage officiel appelé icnfnt , qui vous permet de choisir et de conditionner uniquement les icônes dont vous avez besoin dans la version actuelle de Font-awesome (v3.0.2).

Le téléchargement personnalisé comprend également tous les codes CSS, LESS, SCSS et SASS!

J'utilise LESS et non SASS donc vous devrez peut-être adapter votre implémentation.

Environnement:

• Font awesome 4.5.0 (version actuelle)
• Ubuntu 14.04 LTS
• frapper

Utilisez ceci pour générer la liste des numéros de caractères Unicode dont vous avez besoin:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

Vous l'utilisez ensuite avec FontSquirrel en mode expert où vous sélectionnez un sous-réglage personnalisé: http://www.fontsquirrel.com/tools/webfont-generator

Dans les plages Unicode, entrez les valeurs ci-dessus séparées par des virgules.

Ensuite, pour supprimer les éléments inutiles du CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

Vous devrez ouvrir less/font-awesome/icons.lesset coller la sortie du grep dans le fichier.

Eh bien, le sass peut certainement être un peu secoué pour rendre les sélecteurs %basés afin qu'ils ne soient extensibles que. Une fois que cela est fait, les classes peuvent être faites pour correspondre aux icônes voulues, puis @extendles classes font-awesome.

Personnellement, je fais cela, et n'utilise pas réellement les classes dans le balisage, et utilise simplement des sélecteurs pour les éléments pertinents et @extendeux avec ces classes.

Exemple:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

Puis dans votre scss

a.search {
    @extend %fa;
    @extend %fa-search;
}

Et voilà.

Fontastic a fonctionné pour moi (il était répertorié sur la page github de Font Awesome ). Sélectionnez les glyphes dont vous avez besoin et téléchargez-les en tant que nouvelle police personnalisée. Excellent outil.

Iconmoon a travaillé pour moi. Je l'ai utilisé en important le fichier svg de font-awesome, assurant ainsi que j'obtiens les icônes que je veux et pas seulement celles disponibles sur leur site. De plus, ce lien m'a aidé à intégrer les nouvelles icônes https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/