Optimizar Font Awesome solo para clases usadas

Estoy utilizando el archivo de fuente Sass impresionante https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass para que sea _font-awesome.sass por lo que pueda @importen mi proyecto Sass. También estoy usando http://middlemanapp.com/ para convertir Sass a Css . Preguntas:

1. ¿Hay alguna manera de traer solo clases de iconos usadas a mi .css convertido? Porque ahora mismo lleva todas las clases de _font-awesome.sass

2. BONUS: ¿Es posible recompilar las fuentes de alguna manera con clases de iconos usadas para hacerlas más pequeñas en el uso de producción?

Si puedo obtener algunos consejos sobre el n. ° 1 anterior, sería lo suficientemente genial.

Gracias.

Sass no tiene idea de qué clases estás usando realmente. Esto es algo que tendrá que recortar manualmente usted mismo. Abra el archivo .scss proporcionado y piratee todo lo que no necesite.

La edición del archivo de fuente para eliminar glifos innecesarios requiere una aplicación de terceros para hacerlo y está fuera del alcance de esta pregunta.

Fontello es un servicio web en línea que puede hacer todo esto por usted. Le permite mezclar y combinar varias colecciones de fuentes de iconos para crear el archivo de fuente perfecto para su proyecto. Además del archivo de fuente personalizado, proporciona varios archivos .css que contienen estilos ya generados para usted (cambiar la extensión a .scss le permitirá importarlos a su proyecto Sass existente).

fontello es muy bueno pero IcoMoon es aún más impresionante.

Ahora puede crear subconjuntos de iconos de Font-awesome para uso en producción. Ahora existe una herramienta de subconjunto oficial llamada icnfnt , que le permite elegir y empaquetar solo los iconos que necesita de la versión actual de Font-awesome (v3.0.2).

La descarga personalizada también incluye todos los códigos CSS, LESS, SCSS y SASS.

Utilizo LESS y no SASS, por lo que es posible que deba adaptar su implementación.

Ambiente:

• Font awesome 4.5.0 (versión actual)
• Ubuntu 14.04 LTS
• intento

Use esto para generar la lista de números de caracteres Unicode que necesita:

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

Luego usa esto con FontSquirrel en el modo experto donde selecciona subconjuntos personalizados: http://www.fontsquirrel.com/tools/webfont-generator

En rangos Unicode, ingrese los valores separados por comas de arriba.

Luego, para eliminar cosas innecesarias del CSS:

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

Deberá abrir less/font-awesome/icons.lessy pegar la salida del grep en el archivo.

Bueno, el descaro ciertamente se puede mover un poco para hacer que los selectores se %basen de modo que solo sean extensibles. Una vez hecho esto, se pueden crear clases para que coincidan con los iconos deseados y luego@extend las clases de fuentes impresionantes.

Personalmente, hago esto y en realidad no uso las clases en el marcado, y solo uso selectores para los elementos relevantes y @extend ellos con estas clases.

Ejemplo:

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

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

Entonces en tu scss

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

Et voila.

Fontastic funcionó para mí (estaba incluido en la página de github de Font Awesome ). Seleccione los glifos que necesite y descárguelos como una nueva fuente personalizada. Excelente herramienta.

Iconmoon funcionó para mí. Lo usé importando el archivo svg de font-awesome, asegurándome de obtener los íconos que quiero y no solo los disponibles en su sitio. Además, este enlace me ayudó con la integración de los nuevos iconos https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/