Optimiser Font Awesome uniquement pour les classes utilisées


86

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.


csslint vous aidera à trouver les classes inutilisées, vous n'aurez donc pas à le faire manuellement. automatisation ... vous devrez probablement vous implémenter vous-même, mais c'est aussi sur github afin que vous puissiez lancer le vôtre
albert

2
Comment voulez-vous que Sass sache quelles classes vous utilisez? Ce site Web peut générer des fichiers de polices personnalisées à partir d'un certain nombre de polices d'icônes: fontello.com
cimmanon

@cimmanon pourquoi ne postez-vous pas votre réponse ci-dessous et je l'accepterai? J'utilise fontello.com et c'est ce que je recherchais.
HP.

Réponses:


89

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 change automatiquement le nom de classe des icônes - y a-t-il un moyen d'éviter cela?
Adam

Fontello a quelques icônes manquantes. No React, JavaScript, Node.js, Java, par exemple
Vert

44

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


1
IcoMoon vous permet d'importer votre propre police. Fontello does
jscripter

1
J'ai trouvé qu'IcoMoon ne prend en charge qu'un sous-ensemble d'icônes Font Awesome.
Tony O'Hagan

1
@ TonyO'Hagan Vous pouvez peut-être importer le fichier de polices Font Awesome depuis votre système de fichiers local.
L_K

IcoMoon a des icônes manquantes. No React, JavaScript, Node.js, par exemple
Vert

2
Juste un FYI, mais lorsque les icônes Font Awesome sont importées dans IcoMoon, certaines des icônes peuvent ne pas toujours être centrées - cela semble être un problème avec le fichier de police plutôt qu'avec IcoMoon car si vous ouvrez le fichier de police Font Awesome dans Inkscape, vous pouvez voir que certaines icônes sont mal alignées (bien qu'elles s'affichent correctement lors de la sortie dans le navigateur). La solution semble être d'utiliser les contrôles d'édition de glyphe d'IcoMoon pour réduire la largeur du canevas et centrer l'icône.
Noel Whitemore

11

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!


8
Je ne sais pas si cet outil serait considéré comme officiel
Alex W

6

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.


2

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à.


2

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.


Fontastic vous oblige à vous inscrire d'avance pour démontrer quoi que ce soit
Vert

Ce n'était pas le cas il y a un an pour autant que je m'en souvienne. Triste.
mp31415

1
Utilisez simplement mailinator pour créer un compte là-bas. Cela fonctionnait parfaitement pour exporter les icônes.
ppire

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.