Optimizar Font Awesome solo para clases usadas


86

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.


csslint ayudará a encontrar las clases no utilizadas, por lo que al menos no tendrá que hacerlo manualmente. automatizando ... probablemente tendrías que implementarlo tú mismo, pero también está en github para que puedas rodar el tuyo propio
albert

2
¿Cómo esperas que Sass sepa qué clases estás usando? Este sitio web puede generar archivos de fuentes personalizados a partir de varias fuentes de iconos: fontello.com
cimmanon

@cimmanon, ¿por qué no publica su respuesta a continuación y la aceptaré? He estado usando fontello.com y era lo que buscaba.
HP.

Respuestas:


89

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 cambia el nombre de clase de los iconos automáticamente. ¿Hay alguna forma de evitarlo?
Adam

Fontello tiene algunos iconos faltantes. No React, JavaScript, Node.js, Java, por ejemplo
Verde

44

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


1
IcoMoon te permite importar tu propia fuente. Fontello no lo hace
jscripter

1
Descubrí que IcoMoon solo admite un subconjunto de iconos de Font Awesome.
Tony O'Hagan

1
@ TonyO'Hagan Tal vez pueda importar el archivo de fuente Font Awesome desde su sistema de archivos local.
L_K

A IcoMoon le faltan iconos. No React, JavaScript, Node.js, por ejemplo
Verde

2
Solo para su información, pero cuando los íconos de Font Awesome se importan a IcoMoon, es posible que algunos de los íconos no siempre estén centrados; esto parece ser un problema con el archivo de fuente en lugar de IcoMoon porque si abre el archivo de fuente Font Awesome en Inkscape, puede ver que algunos de los iconos están desalineados (aunque se muestran correctamente cuando se envían al navegador). La solución parece ser utilizar los controles de edición de glifos de IcoMoon para reducir el ancho del lienzo y centrar el icono.
Noel Whitemore

11

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.


8
No sé si esa herramienta calificaría como oficial
Alex W

6

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.


2

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.


2

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.


Fontastic requiere que se registre por adelantado para demostrar cualquier cosa
Verde

Hasta donde yo recuerdo, ese no era el caso hace un año. Triste.
mp31415

1
Simplemente use mailinator para crear una cuenta allí. Funcionó perfectamente para exportar los iconos.
ppires el

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.