Optimize Font Awesome somente para classes usadas

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.

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 é muito bom, mas IcoMoon é ainda mais incrível.

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!

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.

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.

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.

Iconmoon funcionou para mim. Usei-o importando o arquivo svg do font-awesome, garantindo assim obter os ícones que desejo e não apenas os disponíveis em seu site. Este link também me ajudou com a integração dos novos ícones https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/