web-dev-qa-db-fra.com

Optimiser la police génial pour les classes utilisées uniquement

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

  1. Existe-t-il un moyen d'apporter uniquement les classes d'icônes utilisées dans mon .css converti? Parce qu'en ce moment, il portait toutes les classes de _ font-awesome.sass

  2. BONUS: Est-il possible de recompiler les polices en quelque sorte avec utilisé des classes d'icônes pour le réduire lors de l'utilisation en production?

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

Merci.

csssassfont-awesome
81
HP.

Sass n'a aucune idée des classes que vous utilisez réellement. C'est quelque chose que vous devrez couper manuellement vous-même. 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 ce 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 police 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).

87
cimmanon

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

42
TasDiam

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-ensemble officiel appelé icnfnt, qui vous permet de choisir et de conditionner uniquement les icônes dont vous avez besoin version de Font-awesome (v3.0.2).

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

11
nickhar

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

Environnement:

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

Utilisez-le 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 dans le mode expert où vous sélectionnez un sous-ensemble personnalisé: http://www.fontsquirrel.com/tools/webfont-generator

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

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.less et collez la sortie de grep dans le fichier.

6
Michelle Tsacheva

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

2
mp31415

Eh bien, le sass peut certainement être un peu secoué pour faire les sélecteurs % basé afin qu'ils soient extensibles uniquement. Une fois cela fait, les classes peuvent être faites pour correspondre aux icônes voulues, puis peuvent @extend les classes impressionnantes.

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 @extend les 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à.

2
designermonkey