Оптимизация шрифта Awesome только для используемых классов

Я использую шрифт Awesome Sass file https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass чтобы сделать это _font-потрясающие.Сасс так что я могу @import в моем проекте Sass. Я также использую http://middlemanapp.com/ для преобразования Сасс до Css. Вопросы:

  1. есть ли способ принести только используемые классы значков в моей конвертироваться .css? Потому что прямо сейчас это провел все занятия от _font-потрясающие.Сасс

  2. бонус: можно перекомпиляция шрифты как-то с используемые классы значков для того чтобы сделать его более малым на пользе продукции?

Если я могу получить несколько советов на #1 выше, это было бы достаточно удивительным.

спасибо.

6 78
css sass font-awesome

6 ответов:

Сасс понятия не имеет, какие классы вы на самом деле используете. Это то, что вам придется вручную обрезать самостоятельно. Открыть предусмотрено .scss файл и взломать все, что вам не нужно.

редактирование самого файла шрифта для устранения ненужных глифов требует стороннего приложения для этого и выходит за рамки этого вопроса.

Fontello - это онлайн веб-сервис, который может сделать все это для вас. Это позволяет смешивать и сочетать между несколькими коллекциями шрифтов значков, чтобы создать идеальный файл шрифта для вашего проекта. В дополнение к настроенному файлу шрифтов, он предоставляет несколько.css файлы, содержащие стили, уже созданные для вас (изменение расширения .scss позволит вам импортировать их в существующий проект Sass).

85

fontello очень хорошо, но IcoMoon еще более удивительным.

40

теперь вы можете подмножество иконок из Font-awesome для использования в производстве. Теперь существует официальный инструмент подмножества под названием icnfnt, что позволяет вам выбрать и упаковать только те значки, которые вам нужны из текущей версии Font-awesome (v3.0.2).

пользовательская загрузка также включает в себя все CSS, LESS, SCSS и Sass код!

10

Я использую меньше и не Сасс, так что вам, возможно, придется адаптировать свою реализацию.

среда:

  • шрифт 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 в файл.

5

Ну, Сасс, конечно, можно немного покачать, чтобы сделать селекторы % на основе, так что они могут быть расширяемыми только. Как только это будет сделано, классы могут быть сделаны в соответствии с нужными значками, а затем может @extend шрифт-удивительные классы.

лично я делаю это, и на самом деле не использовать классы в разметке, а просто использовать селекторы для соответствующих элементов и @extend ними с этими классами.

пример:

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

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

затем в СКС

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

и вуаля.

1

Fontastic работал на меня (он был указан на шрифт Awesome GitHub page). Выберите глифы, которые вам нужны, и загрузите их в качестве нового пользовательского шрифта. Великолепный инструмент.

1