Оптимизировать шрифт 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. Вопросы:

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

  • БОНУС: Возможно ли перекомпилировать шрифты каким-либо образом с используемыми классами значков, чтобы уменьшить его при использовании?

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

Спасибо.

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

Шрифт awesome 4.5.0 (текущая версия) Ubuntu 14.04 LTS bash

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

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

Затем, чтобы удалить ненужные вещи из 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} {
    ...
}

Затем в вашем scss

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

Et voila.

Ответ 6

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

Ответ 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>