Zoptymalizuj Font Awesome tylko dla używanych klas

Używam pliku Font Awesome Sass https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass, aby utworzyć go jako _font-awesome.sass, więc mogę @importw moim projekcie Sass. Używam również http://middlemanapp.com/, aby przekonwertować Sass na Css . Pytania:

1. Czy istnieje sposób na przeniesienie tylko używanych klas ikon do przekonwertowanego pliku .css? Ponieważ w tej chwili zawierał wszystkie klasy z _font-awesome.sass

2. BONUS: Czy można w jakiś sposób przekompilować czcionki z używanymi klasami ikon, aby zmniejszyć ich rozmiar w zastosowaniach produkcyjnych?

Gdybym mógł uzyskać wskazówki dotyczące punktu 1 powyżej, byłoby to wystarczająco niesamowite.

Dzięki.

Sass nie ma pojęcia, jakich klas faktycznie używasz. To jest coś, co będziesz musiał ręcznie przyciąć samodzielnie. Otwórz dostarczony plik .scss i zhakuj wszystko, czego nie potrzebujesz.

Edycja samego pliku czcionki w celu wyeliminowania niepotrzebnych glifów wymaga do tego aplikacji innej firmy i wykracza poza zakres tego pytania.

Fontello to internetowa usługa internetowa, która może zrobić to wszystko za Ciebie. Umożliwia mieszanie i dopasowywanie wielu kolekcji czcionek ikon, aby stworzyć idealny plik czcionki dla swojego projektu. Oprócz dostosowanego pliku czcionki zawiera wiele plików .css zawierających style już wygenerowane dla Ciebie (zmiana rozszerzenia na .scss pozwoli Ci zaimportować je do istniejącego projektu Sass).

fontello jest bardzo dobre, ale IcoMoon jest jeszcze bardziej niesamowity.

Możesz teraz ustawić podzbiór ikon z Font-awesome do użytku produkcyjnego. Obecnie dostępne jest oficjalne narzędzie do tworzenia podzbiorów o nazwie icnfnt , które pozwala wybierać i pakować tylko potrzebne ikony z aktualnej wersji Font-awesome (v3.0.2).

Niestandardowe pobieranie obejmuje również cały kod CSS, LESS, SCSS i SASS!

Używam LESS, a nie SASS, więc być może będziesz musiał dostosować swoją implementację.

Środowisko:

• Font awesome 4.5.0 (aktualna wersja)
• Ubuntu 14.04 LTS
• grzmotnąć

Użyj tego, aby wygenerować listę numerów znaków Unicode, których potrzebujesz:

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

Następnie używasz tego z FontSquirrel w trybie eksperta, w którym wybierasz niestandardowe podzbiór: http://www.fontsquirrel.com/tools/webfont-generator

W zakresach Unicode wprowadź powyższe wartości oddzielone przecinkami.

Następnie, aby usunąć niepotrzebne rzeczy z CSS:

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

Musisz otworzyć less/font-awesome/icons.lessi wkleić dane wyjściowe z grepa do pliku.

Cóż, sass z pewnością można trochę potrząsnąć, aby %oprzeć selektory, więc można je tylko rozszerzyć. Po wykonaniu tej czynności można dopasować klasy do żądanych ikon, a następnie @extendklasy z niesamowitymi czcionkami.

Osobiście robię to i tak naprawdę nie używam klas w znaczniku, a po prostu używam selektorów do odpowiednich elementów i @extendich z tymi klasami.

Przykład:

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

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

Następnie w swoim pliku scss

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

Gotowe.

Fontastic działał dla mnie (był wymieniony na stronie Font Awesome na githubie ). Wybierz potrzebne glify i pobierz je jako nową niestandardową czcionkę. Doskonałe narzędzie.

Iconmoon pracował dla mnie. Użyłem go, importując plik SVG z font-awesome, zapewniając w ten sposób otrzymanie ikon, które chcę, a nie tylko tych dostępnych na ich stronie. Również ten link pomógł mi w integracji nowych ikon https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/