Иконки шрифт: Font Awesome — иконочный шрифт и CSS-инструментарий

Как собрать шрифт с иконками

Разработчики иногда просят иконки не в пнг или свг, не пнг-спрайтом, а в шрифте. Им проще его так использовать. В посте я расскажу как из скетч-файла собрать шрифт, чтобы всем было удобно в будущем.

UPD. Появилась более новая версия сборки

Зачем это делать, есть же фонтелло

Есть много сервисов, которые собирают шрифт из загруженных свг-файлов. Зачем придумывать что-то своё?

• Чтобы случайно не сломать шрифт. Если забыть иконку, которую уже выдавал и не загрузить в фонтеллу, то она не попадет в новый шрифт и где-то в интерфейсе пропадет иконка.
• Подойдет, если дизайнеров несколько. Если дизайнеров в команде несколько, то нужна синхронизация между ними. Было бы круто, если бы каждый мог добавлять в шрифт иконки и не сломать чужой результат.
• Легко встраивается в ваш CI-процесс.
• Не всех устраивает внешний сервис. Внешний сервис может быть недоступен, он может внезапно обновиться, стать платным, и вообще не все готовы отдавать наружу свои иконки.
• Разработчику сразу формируется и less-файл. Обмениваться кодами символов неудобно, они генерируются автоматически и могут измениться, использовать css-класс надежно, он не поменяется.

Вариант 1. Собираем и отдаём шрифт

Я выложил все необходимые файлы в репозиторий icon-font-public, скачайте его и распакуйте куда-нибудь.
Скачать: https://github.com/mikeozornin/icon-font-public/archive/master.zip

Шаг 1. Настраиваем среду

Все эти заклинания надо произнести один раз, дальше не понадобятся

1) Установить brew. Brew — это такой менеджер пакетов, который легко позволяет ставить программы и библиотеки. Выполнить в терминале команду:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 

2) С помощью brew установить шрифтообработчики:

brew install ttfautohint fontforge --with-python

3) Установить node. js, скачать тут https://nodejs.org/en/ current-версию.

4) Установить SketchTool
При установленном Sketch выполнить в терминале команду:

/Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

5) Установить grunt

npm install -g grunt-cli

Шаг 2. Сборка файла шрифта

Для сборки шрифт нужно произнести в терминале заклинание:

./build.sh 

Если в первый раз не сработает, сделайте скрипт выполняемым:

chmod +x build.sh

В итоге при добавлении иконки нужно будет сделать:

1. Нарисовать иконку.
2. Собрать шрифт: ./build.sh
3. Отдать файл шрифта и less-файл разработчику

Что все это было?

Всё, что описано выше работает так:

1. С помощью SketchTool всё, что может быть экспортировано, экспортируется из скетча в СВГ-файлы.
2. СВГ-файлы, полученные на шаге выше собираются в шрифт. Для этого запускается сборщик шрифта, который все СВГ-файлы собирает в шрифт, конвертирует его в нужный формат и формирует хтмл-страницу с превью.

Вариант 2. Собираем и отдаём шрифт npm-пакетом

Это ещё что такое?

Фронтенд-разработчики подключают библиотеки через npm-пакеты. Это привычная и удобная для них среда, кроме этого, npm-пакет сделает передачу шрифта удобней.

Шаг 1. Настраиваем среду

Нужно настроить среду как в первом варианте, и дополнительно настроить локальный npm-репозиторий. Спросите вашего фронтендера как это сделать у вас в команде. Попросите его исправить файл package.json.

Шаг 2. Сборка файла шрифта

1. Нарисовать иконку.
2. Собрать шрифт: ./build.sh
3. Изменить версию пакета в файле package.json
4. Выполнить команду grunt publish
5. Передать разработчику шифровку «Выпустил пакет версии xxx».

Вариант 3. Собираем и отдаём шрифт нугет-пакетом

К сожалению про нугет ничего не знаю, но если кто-то соберет рабочий вариант, добавлю.

На что обратить внимание при рисовании иконок

При экспорте иконок надо не забыть перевести все в кривые. Чего не должно быть:

• Радиусов скруглений
• Покрашенным рамок
• Текстовых надписей

Если это будет, то иконка может выглядеть в шрифте плохо, даже если в СВГ-файле было всё ок.

Если что-то не работает

Я обкусывал наше решение, возможно что-то переобкусал. Пишите если что-то не работает, или попросите помочь вашего фронтендера, он разберется.

«Иконки и шрифт обязаны друг с другом как-то дружить»

Расскажите немного о себе. Где вы учились?

Вы живёте в Петербурге, а работаете на Сан-Франциско?

Да, уже достаточно давно я работаю в агентстве Clay, ещё когда оно называлось SoftFacade.

Как вы в своей повседневной работе взаимодействуете со шрифтами?

Я не так давно начал вникать в структуру шрифтов и изучать, как в них всё работает. До того использовал их довольно поверхностно — буквально с точки зрения «нравится или не нравится». Но чуть больше года назад я записался на форкурс Жени Юкечева и стал погружаться в эту сферу, потому что я чувствую, что она мне нужна. Стал изучать этот большой, неизвестный и сложный мир, куда, как я помню из академии, мне лезть ни в коем случае нельзя.

У нас в Clay довольно специфическая ситуация, потому что мы работаем на рынке приложений, стартапов и каких-то технических штук, где в плане шрифтов всё довольно консервативно. Сейчас начался некоторый бум, появляются разные стилевые направления, используются новые приёмы, но как это было всё близко к условной Helvetica, так это всё в основном и осталось. Повседневная моя работа со шрифтами — это по большей части использование стандартных шрифтов в рамках платформ Android и iOS. Это неплохие шрифты, и с ними удобно работать, они заточены под эти функции, и это уже такая привычка, мы их используем, не замечая. Но когда мы комбинируем различные наши направления — разработку интерфейсов, бренд-айдентику, создание повествовательных сайтов, — мы можем применять более акцидентные решения: например, для заголовков в приложении, в промоматериалах и на лендингах.

Куда, вы думаете, движется тренд?

Тренд движется непонятно куда, но всё становится более смелым. Бренды понимают, что им уже тесно быть просто кучей IT-брендов. Плюс технологии разработки шрифтов прямо сейчас влияют на позиции рынка, и всё больше компаний (а не только Google и Apple, как раньше) могут позволить себе иметь собственный шрифт. IT-компании поменьше ищут готовое решение, готовый шрифт, но всё чаще выбирают путь создания своего шрифта, собственного голоса, которым они хотят звучать. Это основной тренд. А в смысле стилей — может быть всё что угодно. В прошлом, кажется, году компания Mailchimp использовала довольно интересную антикву в своей айдентике, что после породило уже такую моду — остальные тоже начали пробовать антиквы, что меня радует. Нечто подобное произошло и с Dropbox, когда они стали первыми, кто начал действительно широко использовать вариативный шрифт, что тоже породило за собой волну спроса. Думаю, в будущем всё будет зависеть от таких крупных компаний. Они принимают основные решения, остальные более-менее тянутся за ними. Надеюсь, у них будут интересные решения.

Dropbox использует вариативный шрифт Sharp Grotesk студии Sharp Type

Приходится хоть иногда иметь дело с кириллицей?

За последнее время у нас было, мне кажется, только три проекта с кириллицей — и везде она была лишь наряду с латиницей. Получается, что живу я в кириллице, но практически никогда в ней не работаю. Для меня это фон, в который я никогда особо не вглядывался. То есть кириллические буквы — это довольно странная вещь. Это красиво и самобытно, но, как ни странно, для меня они — диковинка. Я в работе с кириллицей чувствую себя неуверенно. Мне сложнее распознать хороший шрифт, потому что я не видел двести тысяч букв ж, чтобы оценить, какая из них мне больше нравится. Но, к счастью, это работает и в другую сторону: для меня все кириллические шрифты прекрасны. Кроме шрифта Myriad — в остальные все я влюблён.

Судя по тому, каким был наш инстаграм в этот месяц, у вас целая куча разных навыков и интересов…

Я себе поставил сверхзадачу: чтобы по моим постам нельзя было понять, что их все делал один человек. Поэтому там присутствуют довольно разные решения и приёмы — и стилистические, и технические. Мне хотелось, во-первых, попробовать разные новые технические штуки, которые я ещё не пробовал. А во-вторых, поэкспериментировать со стилями. Надеюсь, мои посты выглядели странно и были непохожи друг на друга. К сожалению, далеко не всё сделанное пошло в ход, потому что не в моих правилах настолько сырой результат публиковать. Поэтому какие-то работы не вышли, какие-то я перебирал ночью перед релизом. Но в целом это была отличная возможность попробовать поделать со шрифтами то, что я раньше никогда не делал.

«Я не большой поклонник «кинетический типографики» как термина, это значит что этот прием является самоцелью, а это я считаю тупиком. Анимация текст — да, оптические трюки — да. Но концептуально эта штука не самостоятельна.

И тут меня осенило: начало 20 века, конструктивизм, модернизм, футуризм, они же все про новое, про движение. „Был бы у них AE“, подумалось мне, и тут зародился этот набросок. Конечно Styrene не подходит, конечно изинги они б скорее всего не использовали, но и мы все же не в 20-х годах сейчас»
(Телеграм-канал turbabaza)

«Долго подбирался к Giorgio Sans. На первый взгляд это просто конденсный хороший шрифт с высокими строчными. Но если нырнуть глубже, можно обнаружить широкие символы, и тогда шрифт начинает говорить по-новому»
(Телеграм-канал turbabaza)

Почему вы решили ещё параллельно писать в Телеграм-канал про это?

Я посчитал, что одно дело — сделать пост, его опубликовать, а другое дело — рассказать, как это было сделано, о моих впечатлениях от шрифтов, с которыми я работал. Что надо делиться процессом работы, сложностями какими-то и, наоборот, находками. Но, к сожалению, на всё не хватало времени, поэтому иногда я не писал.

Вы призывали людей ставить вам задачи. Много людей написало?

Я не помню. Около десятка. И удивительно — ещё около десятка после окончания месяца почему-то. И естественно, многие задачи были не реализованы. Сам формат мобильного телефона накладывает определённые ограничения — например, если сделать какую-то сложную шрифтовую композицию, то она в формате экрана телефона просто не заработает. Поэтому я старался отталкиваться от определённого минимума, который будет различим в шрифте. Каждый пост до публикации я тестировал на экране небольшого телефона, потому что это важно. И я старался композиционно серию постов выстроить как-то интересно: по сюжету, по масштабу — от буквы до текста, по цветовым решениям и так далее.

В телеграм-канале вы подробно рассказывали о создании изображений, но не так много — про буквы. Давайте теперь поговорим про шрифты и про ваши ощущения от них. Как вы с ними работали? Что понравилось особо?

Сначала я выписал все шрифты и спецификации по каждому: условный HandglovesОдно из распространенных тестовых слов, используемых при разработке шрифтов, плюс символы, плюс абзац набора. Это помогало потом подбирать шрифты под те или иные задачи. Просто я такой дизайнер — я всегда решаю задачи. И я подбирал под конкретные задачи то, что, мне кажется, хорошо их решит. До того как что-то создавать, я начинал рыться в панелях Glyphs, в панелях альтернатив и изучал, что же там внутри «под капотом». Сейчас у меня такой период, что мне это очень интересно. Большинство дизайнеров, как мне кажется, понятия не имеют, насколько интересные там могут быть инструменты. И именно об этом хотелось рассказать в телеграм-канале.

Тестовый файл с шрифтами type.today

Мне очень нравится идея кастомизировать при помощи, например, альтернативных сетов, под свои нужды готовый шрифт — упростить или усложнить его акцидентность. Началось это всё со шрифта Graphik, когда я узнал, что там есть альтернативная строчная а. У меня тогда челюсть до пола выпала, потому что я этим шрифтом много пользовался: мы в Clay его считаем корпоративным, и многие наши клиенты с ним работают. И это уже практически родной инструмент, а тут я узнал, что она может выглядеть по-другому. Это как узнать, что твоя жена умеет жонглировать. То есть я очень удивился. И после этого я начал эту практику постоянно вводить в своей повседневной работе.

Обложки для объявлений о вакансиях в Clay. Обратите внимание на альтернативную форму а в шрифте Graphik

Параллельно я стал кое-что узнавать новое про шрифты: узнал про капитель, про моноширинные цифры, про всякие разные интересные фичи и альтернативы. Был довольно большой текст в том моём посте, где несколько стилистических вариаций для страницы About. Там я прямо обожаю некоторые буквы. Мне очень нравится строчная t в Kazimir, но если в тексте на несколько строк их будет много, то от этих t лучше отказаться. И я смог успокоить набор, потому что в шрифт была зашита такая возможность. Похожая история у меня была с Halvar, когда я захотел его использовать в таблице отправлений аэропорта. Я там поменял некоторые символы и смог перевести все цифры в моноширинные — это успокоило тот язык, которым шрифт говорит.

«У Halvar есть альтернативы, которые делают шрифт менее акцидентным, например тут я упростил a. Также попробовал цифры сделать моноширинными, не знал, что так можно, до курса на type.today, а во многих шрифтах это есть. Резюмируя: советую рыться во вкладке open type и смотреть все знаки шрифта»
(Телеграм-канал turbabaza)

У вас появились шрифты-любимчики?

У меня был пост про Tinder. И это было мучение остановиться на одном шрифте, который по сюжету будет выбран в конце. Я тогда просто включил рандом и ткнул наугад — попал в Amalta. А так, конечно, у меня есть любимчики — с какими-то шрифтами мне было очень комфортно, какие-то шрифты стали просто полным открытием для меня. Например, Halvar, хотя из этой категории шрифтов куда более популярен Druk. Но в Halvar зашито достаточно много всего, что можно сделать с одним шрифтом. Я в него основательно погрузился, пока делал этот чудный куб. Ещё я большой поклонник нескольких букв в Menoe Grotesque. Он мне очень нравится, но я его мало использовал в вашем инстаграме. Нравится сильное концептуальное решение в Stratos, когда заглавная буква имеет такую же ширину, что и строчная, — это даёт свою какую-то акцидентность. Styrene — хорошее решение для современных UI и веб-штук. Если оставаться в эстетике технологичной, потому что он и свежий, и в то же время его можно прочитать. Не самый акцидентный такой шрифт, не для одного слова. И там есть такой хай-тек во всех прописных буквах, но не пошлый.

«Задача была чисто техническая на самом деле: попробовать в формат инстаграма тайп.тудэй вместить мобильный интерфейс, да так, чтобы можно было рассмотреть красоту букв. Шрифт Styrene, считаю его интересным решением для интерфейсов, чуть шире San Francisco/Helvetica, довольно геометричный, для заголовков весьма выразительный»
(Телеграм-канал turbabaza)

С какими-то шрифтами мне, наоборот, было не очень комфортно, но я уверен, что это произошло в силу моих незнаний. Мне очень нравится Amalta, но я понятия не имею, куда я могу её применить. Я как-то пробовал на уровне буквы взаимодействовать с ней. Также большинство антиквенных шрифтов, которые для меня, по большому счету, незнакомцы — в Clay я редко сталкиваюсь с серифами. Антиквы у type.today разные и все интересные, но у меня тут не хватило экспертизы, чтобы считать и показать их сильные стороны. Хотя мне очень понравилось, как выглядит капитель у Spectral — прямо по-римски, но современно.

«Задача была совместить в заголовке шрифт с засечками и эмодзи, давно кручусь над тем, чтобы сделать свои эмодзи, но пока по иконотеке достаточно задач. Смысл в том, что мы используем эмодзи часто, интересно бы узнать, в среднем какие цифры соотношения использования эмодзи-символа относительно буквы в ежедневной переписке»
(Телеграм-канал turbabaza)

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

Почему они вам так интересны?

У меня есть сайд-проект — я проектирую библиотеку пиктограмм, довольно объёмную. Я узнал от Жени Юкечева, что приставка Pro обозначает, что в шрифте, кажется, больше 1500 символов. И мне интересно, как организовать такой массив данных, потому что те пиктограммы, которые я делаю сейчас, там уже 841 пиктограмма в восьми начертаниях. Пусть пиктограммы и шрифты — это довольно разные с точки зрения нынешнего восприятия штуки, но у них идентичные корни: и то и другое служит одной цели — донести информацию путём графического воспроизведения. Это в принципе одна из основных причин моего нынешнего увлечения шрифтами и их техническими особенностями — работа с большим объёмом информации и при этом сохранение определённого стиля и посыла.

Могу рассказать, с чего эта иконотека началась. У нас был дизайнер из тех молодых, которые не знают даже фотошопа. Они знают сразу скетч и не рисуют совсем. И я увидел у него гугловые пиктограммы, взятые из Material Design Icons, в интерфейсе iOS. Меня охватил когнитивный диссонанс, я сказал, что так делать нельзя. И получил встречный вопрос: «А где их брать?» И тут я понял, что такого ресурса нет. Есть какие-то попытки сделать пиктограммы, но, по моему опыту, 100–200 пиктограмм не решают проблемы. Их нужно куда больше, нужна хорошая система навигации, нужны ширины, толщины и так далее.

Сейчас на сайте Iconoteka более 500 иконок

Как вы думаете, эмодзи повлияют на типографику будущего?

Да, в принципе они уже сейчас развиваются параллельно, ходят рядом, но прямое пересечение случается не всегда. И я не знаю, свяжется ли это всё вместе. Они могут на уровне брифа быть прямо одинаковыми, а вот на уровне реализации — конечно, нет. Хотя если в брифе на дизайн иконок, пиктограмм или эмодзи есть пункт, что они должны быть «из 85-го и при этом швейцарцы», то такое словосочетание может работать как бриф и для шрифтового дизайнера. Есть пиктограммы, которые как раз есть нечто среднее между эмодзи и шрифтом. Я уже не первый год изучаю эту тему, потому что в мире интерфейсов бывают случаи, когда пиктограммы занимают половину визуального поля, а вторую половину занимают шрифты. И тогда уже обязана быть созвучность. У тех же компаний — технических гигантов у каждой есть свой набор эмодзи. Они поняли в своё время, что им нужен свой голос. И здесь прямая параллель со шрифтами, потому что используются они вместе. Если бренд хочет вещать, то он должен вещать и пиктограммами, и шрифтами. И это очень близкие вещи — и по смыслу, и технически.

Эмодзи и буквы часто находятся внутри одной строки. Интересно, начнут ли они двигаться навстречу друг другу?

Мне кажется, у шрифта куда больше технической и смысловой нагрузки, и если он начнёт двигаться к эмодзи, то просто перестанет читаться через какое-то время. А эмодзи, я думаю, точно должны как-то приравниваться к шрифту на эмоциональном уровне и быть созвучными с ним. Есть множество приёмов, которые могут помочь. Сейчас я их ещё отрабатываю и в своей иконотеке, и в работе. Но для этого нужна достаточная экспертиза и в шрифтовом дизайне, и вот в этом пиктограммном деле (если это так можно назвать). К примеру, можно взять строчную букву o и сделать её визуально созвучной с головой пиктограммы юзера. То же самое — какие-то входы в стойки, закругления углов и более простые ситуации, как окончания штрихов, какие-то пропорциональные решения и так далее. В целом поскольку иконки и шрифт находятся в одном визуальном поле, они обязаны друг с другом как-то начинать дружить. И тут важно пробовать совмещать, потому что ни то ни другое никуда не денется. Это должна быть какая-то синергия более здоровая с точки зрения визуального языка.

В вашей иконотеке вы делаете много начертаний одного знака?

Зависит от знака. Есть на самом деле знаки, которые довольно близки к шрифту и которые есть непосредственно в большинстве шрифтовых файлов. Это, например, стрелка. Но также есть знаки, которые довольно сложно изобразить, к примеру знак профессионального фотоаппарата. Если выстраивать параллели со шрифтом, то это какой-то очень сложный знак, который имеет много пересечений в себе. Условно говоря, иероглиф. Моя задача в иконотеке — всё это собрать таким образом, чтобы оно выглядело более-менее последовательно. Кстати, по поводу начертаний тут легко привести параллель со шрифтами. На данный момент есть четыре насыщенности — от light до bold (примерный эквивалент ultra light — regular в шрифтах). Но также есть особенности — это пиктограммы с заливкой и линией. В каких-то случаях нужны все восемь вариантов, а в каких-то — только четыре. В стрелке только четыре, там заливки быть не может. А если это нечто в круге или, например, телевизор, то это может быть исполнено как линией, так и заливкой.

Сейчас я хочу совместить это всё со шрифтовыми программами. Попытаюсь влезть с пиктограммами в шрифтовые редакторы. У меня был небольшой опыт с приложением Glyphs, и я буду продолжать копать в этом направлении — оно мне кажется правильным. Я надеюсь, что смогу прийти к какой-то вариативности. За этим будущее. И в принципе есть все условия для того, чтобы использовать шрифтовые фичи в пиктограммном деле. Потому что рынок пиктограмм сегодня в странном состоянии. Есть иконки Apple, есть Material Design Icons — набор пиктограмм от Google. Это как шрифты, но и там и там мало знаков для работы. И есть сайты, где можно купить или скачать только отдельные «буквы», из которых ничего не собрать в одном стиле — есть, например, пиктограмма портфеля, а такую же пиктограмму ложки уже не найти. Поэтому я начал с иконотеки, большой бесплатной библиотеки, которая, надеюсь, послужит толчком для дальнейшего развития рынка.

Вы ведь знаете, что у эмодзи есть юникодная ячейка?

Да. Но сейчас иконотека работает как поиск, потому что юникодом не всем удобно пользоваться. Моя цель — чтобы её использовали и дизайнеры интерфейсов, и графические дизайнеры, и — самое важное — условный петербургский дворник, которому на объявление «Осторожно, сосули» надо налепить черепок или что-нибудь такое. То есть чтобы это было что-то такое базовое, в общем доступе. Поэтому я даже не собираю пока никакого шрифта. Пока что это работает как сайт с поисковой строкой, куда я пытаюсь вписывать всё больше тегов, чтобы пользователям было проще искать.

CSTM Emoji в программе RoboFont. В шрифте эмодзи стоят на месте букв, а также повторяются на своих юникодных значениях

А сейчас что это? Альтруизм?

Пока что да. Надеюсь, это всегда будет альтруизм, проект можно поддержать на Patreon, но доступ к библиотеке всегда будет бесплатным. Там просто слишком много работы. Если взять, к примеру, все алфавиты мира, мы там получим какое-то количество букв. Не знаю, кто-то их считал?

Юникод считает.

Да. Но если мы возьмём все визуальные образы мира, то это будет больше в любом случае. Поэтому это бесконечная история. Сколько успею сделать и насколько хватит сил, так и будет. Это уже какой год длится в фоновом режиме. Надеюсь, к чему-то придём. До сих пор нет публичного релиза. Надеюсь, он случится в этом году, иконотека окажется полезным инструментом, ей заинтересуются много людей и будут как-то её развивать. Может, потом фонд какой-нибудь организуем и гайдлайны, чтобы дальше другие продолжали это делать. Посмотрим.

Удачи вам. И спасибо большое за интересный инстаграм и классный разговор.

Вам спасибо большое за возможность и за интервью.

Как подключить и использовать Font Awesome 5. Полное руководство.

Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.

Как подключить Font Awesome

В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.

Подключение с помощью CDN

Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег <head> вашего сайта, на тех страницах где вы собираетесь использовать иконки.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

div::after{
        display: block;
        content: '\f17b';
        font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
        font-weight: 900;
        width: 100px;
        height: 100px;
        }

 span This is some other footer stuff.
    ul
      li.fa.fa-google-plus
        a(href='#')
        i.fa.fa-facebook
      li
        a(href='#')
        i.fa.fa-lg.fa-twitter
      li
        a(href='#')
        i.fa.fa-lg.fa-google-plus
      li
        a(href='#') 
        span.fa.fa-lg.fa-linkedin
 span and some more footer stuff.

doctype html
html
  head
    title= title
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css', rel='stylesheet', media='screen')
    link(href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  include ./header.jade
  body(style="padding-bottom:10rem;")
    block content

  script(src='http://code.jquery.com/jquery.js')
  script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')

span Hello world
  ul.fa-ul
    li
      i.fa-li.fa.fa-facebook
      a(href='#') Facebook
    li
      i.fa-li.fa.fa-lg.fa-twitter
      a(href='#') Twitter
    li
      i.fa-li.fa.fa-lg.fa-google-plus
      a(href='#') Google+
    li
      i.fa-li.fa.fa-lg.fa-linkedin
      a(href='#') LinkedIn

meta(charset="utf-8")

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css">

<script defer src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>

font-family: "Font Awesome 5 Free";
content: '\f077';
font-weight: 600;
}

font-family: "Font Awesome 5 Free";

font-family: "Font Awesome 5 Pro";

font-family: "Font Awesome 5 Free Solid"; /* Solid */
font-family: "Font Awesome 5 Brands";  /* Brands */

font-family: "Font Awesome 5 Pro"; /* Solid, Regular, Light */
font-family: "Font Awesome 5 Pro Regular"; /* Regular */
font-family: "Font Awesome 5 Pro Light"; /* Light */
font-family: "Font Awesome 5 Brands"; /* Brands */

.facebook:before {
font-family: "Font Awesome 5 Brands";
content: '\f39e';
font-weight: 600;
}

font-weight: 600;

font-weight: 900;

  $ npm установить шрифт простых значков
  

  $ композитору требуется шрифт simple-icons-font
  

  [сборка: ExportFont ("FASolid.otf", Alias ​​= "FA")]
  

  SocialItems = новый список 
{
    новый SocialItem
    {
        Icon = IconConstants.TwitterCircle, // "\ uf547"
        Url = "https: // www.twitter.com/shanselman "
    },
    новый SocialItem
    {
        Icon = IconConstants.FacebookBox, // "\ uf20d"
        Url = "https://www.facebook.com/shanselman"
    },
    новый SocialItem
    {
        Icon = IconConstants.Instagram, // "\ uf2fe"
        Url = "https://www.instagram.com/shanselman"
    }
};
  

  
    
        
            <Кнопка
                Command = "{Привязка OpenUrlCommand}"
               
                Text = "{Значок привязки}" />
        
    

  

  общедоступная константная строка Car = "\ uf10b";
  

   & # xf10b; 
  

  <Изображение
    Сетка.Столбец = "2"
    HeightRequest = "44"
    HorizontalOptions = "Центр"
    VerticalOptions = "Центр"
    WidthRequest = "44">
    
        
    

  

$ npm установить font-blast -g
 

$ font-blast [svg-font-file] [каталог-назначения]
 

font-blast / Пользователи / Сара / Загрузки / fontello-08cdd41f / font / fontello.svg / Пользователи / Сара / Загрузки / fontello-08cdd41f / svg-icons