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

86

Я использую файл 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 выше, это было бы достаточно круто.

Спасибо.

HP.
источник
csslint поможет найти неиспользуемые классы, так что, по крайней мере, вам не придется делать это вручную. автоматизация ... вам, вероятно, придется реализовать себя, но это также есть на github, поэтому вы можете свернуть свой собственный
Альберт
2
Как вы ожидаете, что Sass узнает, какие классы вы используете? Этот веб-сайт может создавать файлы пользовательских шрифтов из ряда значков шрифтов: fontello.com
cimmanon
@cimmanon, почему бы вам не опубликовать свой ответ ниже, и я его приму? Я пользовался fontello.com, и это было то, что я искал.
HP.

Ответы:

89

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

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


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

Cimmanon
источник
fontello автоматически меняет имя класса значков - есть ли способ избежать этого?
Adam
У Fontello отсутствуют некоторые значки. Нет React, JavaScript, Node.js, Java, например
Green
44

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

ТасДиам
источник
1
IcoMoon позволяет импортировать собственный шрифт. Fontello не делает
jscripter 02
1
Я обнаружил, что IcoMoon поддерживает только подмножество значков Font Awesome.
Тони О'Хаган
1
@ TonyO'Hagan Может быть, вы сможете импортировать файл шрифта Font Awesome из вашей локальной файловой системы.
L_K
В IcoMoon отсутствуют значки. Нет React, JavaScript, Node.js, например
Green
2
Просто к сведению, но когда значки Font Awesome импортируются в IcoMoon, некоторые значки не всегда могут быть центрированы - это, похоже, проблема с файлом шрифта, а не с IcoMoon, потому что если вы откроете файл шрифта Font Awesome в Inkscape, вы увидите, что некоторые значки смещены (хотя они отображаются правильно при выводе в браузер). Похоже, решение состоит в том, чтобы использовать элементы управления редактированием глифов IcoMoon, чтобы уменьшить ширину холста и центрировать значок.
Ноэль
11

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

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

Nickhar
источник
8
Я не знаю, можно ли считать этот инструмент официальным
Alex W
6

Я использую 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 в файл.

Мишель Цачева
источник
2

Что ж, 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;
}

И вуаля.

дизайнеробезьяна
источник
2

У меня сработал Fontastic (он был указан на странице Github Font Awesome ). Выберите нужные глифы и загрузите их как новый собственный шрифт. Отличный инструмент.

mp31415
источник
Fontastic требует, чтобы вы зарегистрировались заранее, чтобы продемонстрировать что-либо
Green
Насколько я помню, год назад этого не было. Печальный.
mp31415
1
Просто используйте mailinator, чтобы создать там учетную запись. Он отлично работал с экспортом иконок.
ppires
0

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

guru_laghima
источник