Оптимізуйте Font Awesome лише для класів, що використовуються

Question 1

Я використовую файл 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 вище, це було б досить дивовижно.

Дякую.

Question 2

Сасс не уявляє, якими класами ви насправді користуєтесь. Це вам доведеться вручну обрізати самостійно. Відкрийте наданий файл .scss і зламайте все, що вам не потрібно.

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

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

Question 3

fontello - це дуже добре, але IcoMoon ще більш дивовижний.

Question 4

Тепер ви можете підмножити піктограми з Font-awesome для виробничого використання. Зараз існує офіційний інструмент підстановки під назвою icnfnt , який дозволяє вибирати та упаковувати лише потрібні значки з поточної версії Font-awesome (v3.0.2).

Спеціальне завантаження також включає всі коди CSS, LESS, SCSS та SASS!

Question 5

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

Навколишнє середовище:

Шрифт awesome 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

У діапазонах Unicode введіть значення, розділені комами, зверху.

Потім видаліть непотрібні речі з CSS:

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

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

Question 6

Ну, sass можна, звичайно, трохи перекрутити, щоб зробити селектори %заснованими, щоб вони могли лише розширюватися. Як тільки це буде зроблено, можна створити класи, щоб відповідати бажаним значкам, і тоді це можуть @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.

Question 7

Fontastic працював у мене (він був перерахований на сторінці Font Awesome github ). Виберіть потрібні гліфи та завантажте їх як новий спеціальний шрифт. Відмінний інструмент.

Question 8

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