Optimize Font Awesome somente para classes usadas


86

Estou usando o arquivo Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass para torná-lo _font-awesome.sass para que eu possa @importem meu projeto Sass. Também estou usando http://middlemanapp.com/ para converter Sass para Css . Questões:

  1. Existe uma maneira de trazer apenas classes de ícones usadas para meu .css convertido? Porque agora ele carregava todas as classes de _font-awesome.sass

  2. BÔNUS: É possível recompilar as fontes de alguma forma com classes de ícones usadas para torná-las menores no uso de produção?

Se eu conseguir obter algumas dicas sobre o nº 1 acima, isso seria incrível.

Obrigado.


O csslint ajudará a encontrar as classes não utilizadas, então pelo menos você não terá que fazer isso manualmente. automatizando ... você provavelmente teria que implementar você mesmo, mas também está no github para que você possa fazer o seu próprio
Albert

2
Como você espera que Sass saiba quais classes você está usando? Este site pode gerar arquivos de fontes personalizadas a partir de uma série de fontes de ícones: fontello.com
cimmanon

@cimmanon por que você não posta sua resposta abaixo e eu aceitarei? Tenho utilizado o fontello.com e era o que procurava.
HP.

Respostas:


89

Sass não tem ideia de quais classes você está realmente usando. Isso é algo que você terá que cortar manualmente. Abra o arquivo .scss fornecido e retire tudo o que você não precisar.

A edição do próprio arquivo de fonte para eliminar glifos desnecessários requer um aplicativo de terceiros para fazer isso e está além do escopo desta questão.


Fontello é um serviço web online que pode fazer tudo isso por você. Ele permite que você misture e combine várias coleções de fontes de ícones para criar o arquivo de fonte perfeito para o seu projeto. Além do arquivo de fonte personalizado, ele fornece vários arquivos .css contendo estilos já gerados para você (alterar a extensão para .scss permitirá que você os importe para seu projeto Sass existente).


fontello muda o nome da classe dos ícones automaticamente - há uma maneira de evitar isso?
Adam

Fontello tem alguns ícones ausentes. No React, JavaScript, Node.js, Java, por exemplo
Verde

44

fontello é muito bom, mas IcoMoon é ainda mais incrível.


1
IcoMoon permite importar sua própria fonte. Fontello não
jscripter

1
Descobri que o IcoMoon suporta apenas um subconjunto de ícones Font Awesome.
Tony O'Hagan

1
@ TonyO'Hagan Talvez você possa importar o arquivo de fonte Font Awesome do seu sistema de arquivos local.
L_K

IcoMoon tem ícones faltando. No React, JavaScript, Node.js, por exemplo
Verde

2
Apenas um FYI, mas quando os ícones Font Awesome são importados para IcoMoon, alguns dos ícones podem nem sempre estar centralizados - isso parece ser um problema com o arquivo de fonte em vez de IcoMoon porque se você abrir o arquivo de fonte Font Awesome no Inkscape você pode ver que alguns dos ícones estão desalinhados (embora sejam exibidos corretamente na saída para o navegador). A solução parece ser usar os controles de edição de glifos do IcoMoon para reduzir a largura da tela e centralizar o ícone.
Noel Whitemore

11

Agora você pode definir subconjuntos de ícones de Font-awesome para uso em produção. Agora existe uma ferramenta oficial de subsetting chamada icnfnt , que permite que você escolha e empacote apenas os ícones que você precisa da versão atual do Font-awesome (v3.0.2).

O download personalizado também inclui todos os códigos CSS, LESS, SCSS e SASS!


8
Não sei se essa ferramenta se qualificaria como oficial
Alex W

6

Eu uso LESS e não SASS, então você pode ter que adaptar sua implementação.

Meio Ambiente:

  • Fonte incrível 4.5.0 (versão atual)
  • Ubuntu 14.04 LTS
  • bash

Use para gerar a lista de números de caracteres Unicode de que você precisa:

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

Você, então, usa isso com FontSquirrel no modo especialista, onde seleciona subconjuntos personalizados: http://www.fontsquirrel.com/tools/webfont-generator

Em intervalos Unicode, insira os valores acima separados por vírgulas.

Em seguida, para remover coisas desnecessárias do CSS:

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

Você precisará abrir less/font-awesome/icons.lesse colar a saída do grep no arquivo.


2

Bem, o atrevimento pode certamente ser alterado um pouco para tornar os seletores %baseados, de forma que sejam apenas extensíveis. Uma vez feito isso, as classes podem ser feitas para corresponder aos ícones desejados e, então, podem@extend as classes incríveis de fontes.

Pessoalmente, eu faço isso e não uso realmente as classes na marcação, apenas uso seletores para os elementos relevantes e @extendos com essas classes.

Exemplo:

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

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

Então em seu scss

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

Et voila.


2

Fontastic funcionou para mim (foi listado na página do github Font Awesome ). Selecione os glifos necessários e baixe-os como uma nova fonte personalizada. Excelente ferramenta.


Fontastic exige que você se registre com antecedência para demonstrar qualquer coisa
Verde

Não era o caso há um ano, pelo que me lembro. Triste.
mp31415,

1
Basta usar o mailinator para criar uma conta lá. Funcionou perfeitamente para exportar os ícones.
ppires

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.