css - iconos - Optimize Font Awesome para solo las clases usadas
font awesome ttf (6)
Estoy usando el archivo Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass para que sea _font-awesome.sass así que puedo @import en mi proyecto Sass. También estoy usando http://middlemanapp.com/ para convertir Sass a Css . Preguntas:
¿Hay alguna manera de traer solo clases de iconos usados a mi .css convertido? Porque ahora llevaba todas las clases desde _font-awesome.sass
BONIFICACIÓN: ¿Es posible recompilar las fuentes de alguna manera con las clases de iconos usadas para reducir su uso de producción?
Si puedo obtener algunos consejos sobre el n. ° 1 anterior, sería increíble.
Gracias.
Ahora puede subconjuntar iconos de Font-awesome para uso de producción. Ahora hay 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!
Bueno, el sass ciertamente puede sacudirse un poco para hacer que los selectores estén basados, por lo que solo se pueden extender. Una vez hecho esto, las clases se pueden hacer para que coincidan con los iconos deseados, y luego pueden @extend las clases increíbles.
Personalmente, hago esto, y no uso las clases en el marcado, solo uso selectores para los elementos relevantes y @extend 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.
Fontello es muy bueno, pero IcoMoon es aún más impresionante.
Sass no tiene idea de qué clases estás usando en realidad. Esto es algo que tendrá que recortar usted mismo manualmente. Abra el archivo .scss proporcionado y corte cualquier cosa que no necesite.
La edición del archivo de fuente para eliminar glifos innecesarios requiere una aplicación de un tercero para hacerlo y está más allá del alcance de esta pregunta.
fontello.com es un servicio web en línea que puede hacer todo esto por usted. Le permite mezclar y combinar múltiples colecciones de fuentes de iconos para crear el archivo de fuentes perfecto para su proyecto. Además del archivo de fuente personalizado, proporciona múltiples archivos .css que contienen estilos ya generados para usted (al cambiar la extensión a .scss, podrá importarlos en su proyecto Sass existente).
Uso LESS y no SASS, por lo que es posible que deba adaptar su implementación.
Ambiente:
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 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
A continuación, utilice esto con FontSquirrel en el modo experto donde selecciona subconjuntos personalizados: http://www.fontsquirrel.com/tools/webfont-generator
En los rangos Unicode ingrese los valores separados por comas de arriba.
Luego, para eliminar cosas innecesarias del CSS: egrep "@ fa-var - ($ fa_icons);" menos / font-awesome / icons.less
Tendrá que abrir menos / font-awesome / icons.less y pegar el resultado de grep en el archivo.
La mejor de las suertes, Martin
Fontastic funcionó para mí (estaba listado en la página Font Font github ). Seleccione los glifos que necesita y descárguelos como una nueva fuente personalizada. Excelente herramienta.