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:
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
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.
css
sass
font-awesome
HP.
źródło
źródło
Odpowiedzi:
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).
źródło
fontello jest bardzo dobre, ale IcoMoon jest jeszcze bardziej niesamowity.
źródło
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!
źródło
Używam LESS, a nie SASS, więc być może będziesz musiał dostosować swoją implementację.
Środowisko:
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; doneNastę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.lessMusisz otworzyć
less/font-awesome/icons.lessi wkleić dane wyjściowe z grepa do pliku.źródło
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.
źródło
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.
źródło
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/
źródło