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

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

1. Есть ли способ перенести в мой преобразованный .css только используемые классы значков ? Потому что сейчас он содержит все классы из _font-awesome.sass

2. БОНУС: Можно ли как-то перекомпилировать шрифты с использованием используемых классов значков, чтобы уменьшить их размер при использовании в производстве?

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

Спасибо.

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

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

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

fontello очень хорош, но IcoMoon еще круче .

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

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

Я использую LESS, а не 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

В диапазонах Unicode введите указанные выше значения, разделенные запятыми.

Затем, чтобы удалить ненужное из CSS:

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

Вам нужно будет открыть less/font-awesome/icons.lessи вставить вывод grep в файл.

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

Лично я делаю это и на самом деле не использую классы в разметке, а просто использую селекторы для соответствующих элементов и @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 Font Awesome ). Выберите нужные глифы и загрузите их как новый собственный шрифт. Отличный инструмент.

Iconmoon у меня сработал. Я использовал его, импортировав файл svg из font-awesome, тем самым убедившись, что я получаю нужные значки, а не только те, которые доступны на их сайте. Также эта ссылка помогла мне с интеграцией новых иконок https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/