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

Question

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

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

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

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

Спасибо.

Answer 1

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

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

---

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

Answer 2

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

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

Answer 3

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

Answer 4

Ну, сасс можно, конечно, немного пошутить, чтобы сделать селекторами %, поэтому они могут быть только расширяемыми. Как только это будет сделано, классы могут быть сделаны в соответствии с нужными значками, а затем могут @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; 
} 

Et вуаля.

Answer 5

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

Окружающая среда:

шрифт удивительным 4.5.0 (текущая версия)

Ubuntu 14.04 LTS

Баш

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

удачи, Мартин

Answer 6

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

Answer 7

<script> 
     // Asynchronously load non-critical css 
     function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function() { i.media = n || "all" }) } 
     // load css file async 
     loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
    </script>