Оптимизировать шрифт Awesome только для используемых классов
Я использую шрифт Awesome Sass file https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass чтобы сделать это _font-awesome.Сасс!--5--> так что я могу @import
в моем проекте Sass. Я также использую http://middlemanapp.com/ конвертировать Сасс to в CSS. Вопросы:
есть ли способ принести только используемые классы значков в моей конвертироваться .css? Потому что прямо сейчас проводил все занятия от _font-awesome.Сасс!--5-->
бонус: можно перекомпиляция шрифты как-то с используемые классы значков чтобы сделать его меньше на производстве?
Если я могу получить несколько советов по #1 выше, это было бы достаточно потрясающе.
спасибо.
6 ответов
Sass понятия не имеет, какие классы вы фактически используете. Это то, что вам придется вручную обрезать самостоятельно. Откройте предоставленное .SCSS файл и взломать все, что вам не нужно.
редактирование самого файла шрифта для устранения ненужных глифов требует стороннего приложения для этого и выходит за рамки этого вопроса.
Fontello - это онлайн веб-сервис, который может сделать все это для вас. Это позволяет смешивать и сочетать между несколькими коллекциями шрифтов значков, чтобы создать идеальный файл шрифта для вашего проекта. В дополнение к настроенному файлу шрифта, он предоставляет несколько .css файлы, содержащие стили, уже созданные для вас (изменение расширения на .scss позволит вам импортировать их в существующий проект Sass).
теперь вы можете подмножество иконок из шрифта-awesome для использования в производстве. Теперь существует официальный инструмент подмножества под названием icnfnt, что позволяет выбрать и упаковать только значки, необходимые из текущей версии шрифта-awesome (v3.0.2).
пользовательская загрузка также включает в себя все CSS, меньше, SCSS и Sass код!
Я использую меньше, а не SASS, поэтому вам, возможно, придется адаптировать свою реализацию.
среда:
- Font awesome 4.5.0 (текущая версия)
- Ubuntu 14.04 LTS
- Баш
используйте это для создания списка номеров символов Юникода, которые вам нужны:
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
затем вы используете это с FontSquirrel в экспертном режиме, где вы выбираете пользовательскую подстановку: http://www.fontsquirrel.com/tools/webfont-generator
В диапазоны Юникода введите значения, разделенные запятыми сверху.
затем, чтобы удалить ненужные вещи из CSS:
egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less
С less/font-awesome/icons.less
и вставить вывод команды grep в файл.
Ну, sass, безусловно, можно немного покачать, чтобы сделать селекторы %
на основе, поэтому они только расширяемы. Как только это будет сделано, классы могут быть сделаны в соответствии с нужными значками, а затем can @extend
шрифт-удивительные классы.
лично я делаю это и фактически не использую классы в разметке, а просто использую селекторы для соответствующих элементов и @extend
ними с этими классами.
пример:
// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...
// _core.scss
%#{$fa-css-prefix} {
...
}
затем в scss
a.search {
@extend %fa;
@extend %fa-search;
}
и вуаля.
Fontastic работал на меня (он был указан на шрифт удивительный GitHub страница). Выберите нужные глифы и загрузите их как новый пользовательский шрифт. Великолепный инструмент.