Разное

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

18.04.2021

Содержание

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

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

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. Раньше мы занимались двумя большими направлениями. Первое направление — это то, что теперь digital brand identity: мы делали обертку для приложений, для их дальнейшего продвижения на рынке. Второе — большие интерфейсы и всякие системы вроде систем условного доступа (CAS). Мы начинали в Петербурге, создали обширный портфель, но со временем, постепенно стали больше работать на американский рынок. Сначала у нас открылся полноценный офис в Нью-Йорке, но большинство клиентов было всё-таки из Кремниевой долины, и через какое-то время пришлось переехать в Сан-Франциско. Сейчас у нас два офиса: один, в Калифорнии, больше ориентирован на работу с клиентами, второй — остался в Петербурге, здесь больше занимаемся производственным процессом. Часть моих обязанностей — это как раз работа петербургского офиса.

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

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

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

Но в приложениях всё-таки мы ограничены тремя-четырьмя шрифтами: Helvetica Neue, Graphik, Roboto и San Francisco. Это основа. C остальным только веселимся.

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

Тренд движется непонятно куда, но всё становится более смелым. Бренды понимают, что им уже тесно быть просто кучей 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> вашего сайта, на тех страницах где вы собираетесь использовать иконки.

Скриншот №1

На скриншоте №1 изображены настройки, которые я использую.

  1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
  2. Начертание шрифта, которое мы будем использовать в своем проекте.
  3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
  4. Сгенерированный код для подключения Font Awesome с помощью CDN.

Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.

<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">

Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.

Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)

Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.

После скачивания получаем архив с файлами, как на скриншоте №2:

Скриншот №2

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Скриншот №3

Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

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

Переносим папку webfont и файл all.min.css на свой хостинг.

Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.

У меня это выглядит так:

Скриншот №4

В папке fontawesome хранится один файл all.min.css

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all. min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Как использовать Font Awesome

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Скриншот №5

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)

Теперь пишем стили css для элемента before или after:

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

Разберем главные моменты в коде.

3. В свойстве content указываем Unicode.

4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.

5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.

Как использовать шрифт Font Awesome в Photoshop

Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».

Смотрите на скриншоте №6:

Скриншот №6

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

Скриншот №7

Стилизация иконок FontAwesome

Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.

Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.

Если информация оказалась полезной поделитесь ей с друзьями в социальных сетях, а так же подписывайтесь на обновление блога и youtube канал, чтобы не пропустить полезные материалы.

Класс иконки, шрифт не показывает шаблонов нефрита



Я использую jade для шаблонов в своем приложении node.js/express, но когда я пытаюсь использовать font awesome, значки не отображаются,а только маркеры списка. Я перепробовал все методы, которые нашел в поисковой системе. например, проблема fa.fa-globe. вот код, взятый из footer.jade

 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.

Как вы можете видеть выше, существуют различные методы, которые я пробовал, i, span и классы

И мой layout.jade выглядит следующим образом:

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')

спасибо

node.js express twitter-bootstrap-3 pug font-awesome
Поделиться Источник OverRipeBananas     02 августа 2015 в 12:24

2 ответа


  • Шрифт Awesome не работает в автономном режиме

    я использую font-awesome иконки для публикации моих шаблонов HTML,CSS. Они прекрасно работают, когда у меня есть живая ссылка, но когда я загружаю файл CSS и включаю его в свои страницы, значок исчезает. Живой Путь: <link…

  • шрифт-потрясающие иконки, встроенные в tcpdf

    Я строю распечатки своего проекта, используя TCPDF. Выходные данные включают в себя тексты, таблицы и изображения. Я хочу, чтобы встроить шрифт потрясающие иконки в TCPDF стиль загрузки, например: <i class=fa fa-fw fa-warning fa-lg text-warning></i> В приведенной выше строке выводится…



2

Главная проблема заключается в том, что вам не хватает атрибута rel='stylesheet' для шрифта-awesome <link> . Это заставит работать значки font-awesome.

Однако если вы пытаетесь заставить значки заменить маркеры в списке, вам нужно будет Настроить элементы списка нижнего колонтитула, как показано на странице font-awesome examples. Например:

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

Поделиться mscdex     02 августа 2015 в 14:13



0

Если вы видите пустой символ там, где должен быть значок, возможно, вам придется добавить кодировку в ваш макет.:

meta(charset="utf-8")

Поделиться Carlos Rodriguez     13 ноября 2015 в 19:18


Похожие вопросы:


Как добавить текст в шрифт потрясающие иконки ручной бар Подвал магазина?

Я настраиваю тему витрины магазина. Портативная панель нижнего колонтитула витрины магазина показывает ссылки на мобильных устройствах. Однако теперь он просто показывает потрясающие значки шрифтов…


HTML шрифт awesome не показывает иконки

Я скачал шрифт awesome min.css и сослался на него в моем HTML markup, как показано ниже. Но шрифт потрясающие иконки не отображаются, только текст Solution показывает вверх. Ниже мой markup….


Шрифт высокий показывает и не показывает (concrete5)

Мой сайт работает на Concrete5. Я хотел добавить еще один значок Font Awesome на существующую страницу, но он не отображается. Странно то, что на моей странице уже есть значки, и они показывают……


Шрифт Awesome не работает в автономном режиме

я использую font-awesome иконки для публикации моих шаблонов HTML,CSS. Они прекрасно работают, когда у меня есть живая ссылка, но когда я загружаю файл CSS и включаю его в свои страницы, значок…


шрифт-потрясающие иконки, встроенные в tcpdf

Я строю распечатки своего проекта, используя TCPDF. Выходные данные включают в себя тексты, таблицы и изображения. Я хочу, чтобы встроить шрифт потрясающие иконки в TCPDF стиль загрузки, например:…


Шрифт-потрясающие иконки отсутствуют

Я хочу создать веб-сайт с использованием html5 и bootstrap. В моем коде html мне нужны шрифтовые иконки. Но когда я поставил шрифт-awesome.min.css и соответствующие шрифты, но я не смог загрузить…


Шрифт-потрясающие иконки начальный заполнитель?

Я использую шрифт потрясающие иконки с рекомендованной справочной Javascript : <script src=https://use.fontawesome.com/7c7031cd1a.js></script> Когда страница завершает загрузку и…


Шрифт потрясающие иконки не загружается с атрибутом целостности

Я использую приложение angular 6. В файле index.html у нас есть потрясающая ссылка на шрифт, например: <link rel=stylesheet href=https://use.fontawesome.com/releases/v5.1.0/css/all.css…


шрифт потрясающие иконки не отображаются в html

у меня есть контактная форма в html , я дал шрифту потрясающие иконки для полей ввода, офис находится ниже: <link rel=stylesheet…


Обновлен шрифт gatsby react awesome icons с 4 до 5, теперь социальные иконки не работают

Я обновил мой Гэтсби шрифт потрясающие иконки от 4.7 в 5.12. Почти все иконки работают, однако социальные иконки-нет, они просто показывают квадратную рамку. Я скачал webpack, я пытался установить…

Шрифт Awesome 5 не отображает иконки

Вот шаги, чтобы проверить, не отображаются ли значки Font Awesome 5 (как правило, с пустыми рамками) вместе с реализациями Font Awesome 5 для Web Font CSS и SVG JS:
1. Убедитесь, что вы правильно связываетесь с Font Awesome 5 CDN в «заголовке» вашего документа

Как подключить Font Awesome 5 различными способами.

Бесплатно
ВЕБ-ШРИФТЫ И CSS
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
SVG & JS
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
Профессионал

Для этого вам понадобится Профессиональная лицензия, затем вы примените собственный домен для работы CDN.

ВЕБ-ШРИФТЫ И CSS
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css">
SVG & JS
<script defer src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>

 

Последние выпуски отображаются во время публикации.

 

2. Убедитесь, что вы вызываете правильный Font Awesome CSS и обладаете необходимыми привилегиями.

Font Awesome 5 разделен на Solid, Regular, Light, Brands, и их можно применять только на следующих уровнях:

Стиль иконкиДоступность
solidСвободно
regularТолько pro
LightТолько pro
BrandsСвободно

 

Так, например, вы не можете отображать значки в Regular или Light, если вы используете Font Awesome Free.

3. Убедитесь, что ваш формат Unicode правильный

.something:before {

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

 

обратите внимание, это не то что ‘/f077′

 

4. Убедитесь, что у вас есть правильное семейство Font Awesome Font в вашем CSS

Если у вас есть правильный файл/привилегии (как указано выше), убедитесь, что ваш элемент покрыт правильным семейством шрифтов Awesome Font.

Бесплатно
font-family: "Font Awesome 5 Free";
Профессионал
font-family: "Font Awesome 5 Pro";

 

Выше приведены общие семейства шрифтов для Font Awesome 5, но вы также можете вызывать определенные стили Font Awesome 5 (Solid, Regular, Light, Brands):

Бесплатно
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 */

 

Обратите внимание, что, как указано выше, стиль «Brands», похоже, не соответствует соглашению об именовании Font Awesome, и в обеих версиях Basic и Pro эти значки имеют семейство шрифтов «Font Awesome 5 Brands». Например, если вы хотите показать иконку Font Awesome на Facebook, вам следует применить стиль «Font Awesome 5 Brands»:

 

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

 

5. Добавьте больший вес шрифта

Интересно, что многие браузеры будут отображать пустое поле, если вы не используете Font Weight более 600, поэтому добавьте следующее в свой CSS

font-weight: 600;

 

или больше:

font-weight: 900;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

Для того, чтобы удержать пользователя на своём сайте, web-приложении или приложении для мобильных устройств нужно всё сделать как можно проще, чтобы даже ребёнку было понятно. Поэтому последнее время дизайнеры и разработчики всё больше нацелеваются выполнить всю умственную работу за инфантильных пользователей. И в этом непростом деле очень помогают иконки и значки, доступные для понимания даже пещерным людям, случайно попавшим в XXI-й век. =)

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

Где взять бесплатный шрифт Font Awesome

Много людей ищут шрифт Font Awesome по понятным им запросам, например «fa fa icon» или «fa icons» или просто «fa fa». И конечно они находят официальный сайт fontawesome.io и для тех, кому английский язык не является родным или понятным, есть очень качественна русская версия сайта поддержки этого шрифта fontawesome.ru. (Обе ссылки откроются в новой вкладке.)

Что же такое шрифт Font Awesome?

Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.

Почему стоит задуматься над тем, чтобы использовать шрифт Font Awesome?

Один шрифт, уже содержит 675 иконок

Единой коллекцией Font Awesome является графическим языком интернет-пространства.

Нет необходимости в JavaScript

Мало проблем с совместимостью, так как для Font Awesome не требуется JavaScript.

Управление через CSS

Легко настроить цвет иконок, размер, тени и все остальное, что возможно с помощью CSS.

Совместимость с фреймворками

Изначально сделанный для Bootstrap, Font Awesome прекрасно работает и с другими фреймворками.

Бесплатно, как воздух

Font Awesome полностью бесплатен для коммерческого использования. И это написано в лицензии.

Доступность

Font Awesome любит экранные читалки и помогает сделать доступными ваши иконки в интернете.

Поддержка Retina-дисплеев

Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.

Бесконечная масштабируемость

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

Совместимость с настольными компьютерами

Возможность использовать Font Awesome в любой программе как обычный шрифт, с описанием, как использовать весь набор иконок.

Использовать шрифт Font Awesome

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

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Лучшие бесплатные иконки шрифтов для веб-дизайнеров

Шрифты, которые вместо букв или цифр заполнены значками и графиками, это в основном иконический шрифт, который вы можете использовать в своих веб-проектах вместо использования изображений для ваших значков. Чтобы использовать значок шрифта, вам просто нужно встроить веб-шрифт значка в CSS, затем выбрать значок из карты символов, обычно с определенным классом в i или же span элемент, поэтому значок будет отображаться в элементе.

В этом топе мы расскажем вам о 10 самых современных и простых в использовании значках шрифтов, которые вы можете использовать в своих новых проектах для создания интерактивных и интуитивно понятных приложений.

Github

Строка awesome — это значок шрифта, который можно использовать для замены Font Awesome на современные иконки линий, используя одну строку кода. Он предлагает широкий спектр тем, таких как медицина, бренды, видео, дирекция, текстовые издания, графики, элементы управления формой, значки транспорта и многое другое.

Github

Icono — это легкая библиотека значков, которая позволяет отображать красивые значки с помощью одного, без шрифта или SVG, просто чистого CSS.

Github

Devicons, это иконический шрифт, созданный для разработчиков, кода джедаев, ниндзя, HTTPsters, евангелистов и ботаников (sic). Он предлагает более 100 иконок, готовых к использованию в вашем следующем проекте. Создано, изготовлено вручную и закодировано Теодор Ворильяс Девиконс содержит 85 векторизованных острых глифов. Шрифт Devicons Iconic является бесплатным и лицензирован по MIT.

Github

Stackicons — это шрифты значков для Интернета, предназначенные для большего — с несколькими формами кнопок и уникальной «многоцветной» опцией. Stackicons-социальный шрифт и Sass-based конструктор являются бесплатными и с открытым исходным кодом, созданными Паркер Беннетт.

Github

Genericons — это удивительный легкий набор иконок общего назначения, подходящий для блога или простого веб-сайта.

Github

Feather — это коллекция просто красивых иконок с открытым исходным кодом. Каждая иконка разработана на сетке 24×24 с акцентом на простоту, последовательность и удобочитаемость. По своей сути Feather представляет собой набор файлов SVG. Это означает, что вы можете использовать иконки Feather точно так же, как вы можете использовать SVG (например, img, background-image, inline, object, embed, iframe).

Github | Github Webfont

Material Design Icons — это огромная коллекция из 2400 иконок сообщества. Растущая коллекция иконок Material Design Icons позволяет дизайнерам и разработчикам, ориентирующимся на различные платформы, загружать иконки в формате, цвете и размере, которые им необходимы для любого проекта.

Github

Octicons — это масштабируемый набор иконок, созданный вручную команда GitHub, основанный на SVG.

Github

Ionicons — это премиум-иконки с открытым исходным кодом (по лицензии MIT) для использования в веб, iOS, Android и настольных приложениях. Ionicons был построен для Ionic Framework, поэтому иконки имеют версии Material Design и iOS. При использовании с Ionic компонент ion-icon автоматически использует правильную версию в зависимости от вашей платформы. Кроме того, когда приложение используется вне Ionic, приложение может выбирать платформы ios и md.

Github

Font Awesome 4 — это полный набор из 675 пиктографических иконок для простой масштабируемой векторной графики на веб-сайтах, созданный и поддерживаемый Дейвом Ганди. После использования для многих веб-разработчиков и дизайнеров, Font Awesome перепроектировал и построил с нуля, опубликовав Font Awesome 5. Помимо этого, есть такие функции, как лигатуры шрифтов значков, инфраструктура SVG, официальные пакеты NPM для популярных библиотек веб-интерфейсов, таких как React, и доступ к новому CDN.

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

Что такое иконочные шрифты? | Pluralsight

Иконочные шрифты — это шрифты, содержащие символы и глифы вместо букв или цифр. Они популярны среди веб-дизайнеров, поскольку вы можете стилизовать их с помощью CSS так же, как и обычный текст. Кроме того, поскольку они векторные, их легко масштабировать. Они маленькие, поэтому загружаются быстро и (бонус!) Поддерживаются всеми браузерами. Обычно шрифты значков имеют только один цвет, и они делаются по сетке, например, 16 пикселей на 16 пикселей или 32×32. Любой эффект CSS3 неплохо смотрится на дисплее Retina.Иконочными шрифтами очень легко манипулировать с помощью CSS3. Иконочные шрифты — довольно простой способ решения проблемы адаптивного дизайна. Очень просто настроить отображение текста разного размера для разных размеров области просмотра, но гораздо сложнее изменить размер изображений. Также просто изменить их цвет или добавить тень к форме значка шрифта. Есть несколько недостатков в использовании шрифтов со значками. Во-первых, хотя вы можете изменить их цвет, вы не можете использовать более одного цвета. Прямо сейчас популярны простые, чистые, монохромные дизайны, так что это не большая проблема, но об этом все же следует знать.Другая проблема — доступность. Хотя сделать значки шрифтов доступными, поместив их в класс aria, довольно просто, об этом следует помнить. Вы можете получить иконочные шрифты из множества разных мест. Три самых популярных — Entypo, Font Awesome и IcoMoon. Вы можете использовать эти шрифты на своем сайте через объявление CSS @ font-face.

Entypo CC BY-SA 3.0 предоставляет Entypo бесплатно, поэтому, если вы хотите использовать его, вы можете, но они ожидают, что вы включите простую атрибуцию.Entypo Suite — это пакет, который включает шрифты OpenType, TrueType и @ font-face. Entypos был создан Данилом Брюсом и Андреасом Бломбеком. Сайт Entypo имеет простой интерфейс и включает в себя карту персонажей, которая является полным справочником, так что вы можете легко выбрать правильный значок, когда вы его ищете. На ваш выбор более 250 иконок. Entypo 2.0 включает в себя расширение для социальных сетей, поэтому вы можете добавлять значки социальных сетей, таких как Twitter, Facebook, Google+, Pinterest и т. Д.

Font Awesome Font Awesome бесплатен и имеет открытый исходный код.Изначально он был разработан для работы с Bootstrap, но хорошо работает со всеми фреймворками. Чтобы использовать значки Font Awesome, вам нужно использовать @fontface и поместить их в элемент или, а затем назначить им классы. Что очень хорошо в Font Awesome, так это то, что, поскольку он полностью открыт, он пользуется большой поддержкой и постоянным обновлением. Если у вас есть вопросы, вы можете просто зайти в раздел «Сообщество» на их сайте и найти ответы на них. Есть множество разных способов разместить значки Font Awesome на своем сайте.Они показывают фрагменты кода, чтобы помочь вам понять, как добавить значки Font Awesome на ваш сайт. Font Awesome также предоставляет множество отличных советов, которые помогут вам начать работу с их размещением на вашем сайте.

IcoMoon IcoMoon предлагает как бесплатные, так и платные шрифты. Бесплатные шрифты имеют открытый исходный код, а премиум-шрифты платные. У IcoMoon также есть веб-приложение, которое позволяет вам создавать собственный шрифт, выбирая только те значки, которые вам нужны. Вы даже можете добавить в это приложение свои собственные значки, которые будут включены в шрифт, созданный через их веб-приложение.После того, как вы выбрали значки, IcoMoon предоставит вам HTML-файл, в котором показано, как именно использовать значок шрифта! Entypo также включен в качестве одного из шрифтов на выбор в IcoMoon. IcoMoon — фантастический инструмент, позволяющий включать на свой сайт только те значки, которые вы хотите. Если вы добавите меньше значков, ваша страница будет загружаться быстрее.

❍ Иконка Шрифт

Создание пользовательских шрифтов

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

Результаты Pixel Perfect

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

Бесплатные иконки, бесплатное приложение

Приложение IcoMoon бесплатное. Вам не нужно ничего платить или возвращать кредит за его использование. Библиотека IcoMoon содержит множество высококачественных наборов иконок.Все эти значки созданы в виде сетки и оптимизированы для использования с приложением IcoMoon. Добавьте любой набор, который вы хотите легко просматривать и искать его значки.

Удивительный инструмент для иконографии

Приложение IcoMoon — это усовершенствованный инструмент для создания иконок. Он позволяет сортировать значки, управлять коллекциями значков или делать значки доступными для поиска, добавляя к ним теги. Помимо шрифтов, вы можете создавать значки в PNG, SVG, полимерные значки, PDF-файлы, CSH, XAML и CSS-спрайты любого размера и цвета по вашему желанию.

Импортируйте собственные векторы

В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы при их импорте. Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.

Работает в автономном режиме

После загрузки в ваш браузер приложение IcoMoon работает в автономном режиме.Когда вы импортируете значок или генерируете шрифт, все происходит локально, в вашем собственном браузере . Ваши значки / шрифты не будут загружены на наши серверы. Вы даже можете загрузить приложение IcoMoon, когда у вас нет подключения, если вы установите его из Интернет-магазина Chrome.

Множественные лигатуры на символ

Вместо того, чтобы назначать вашим глифам отдельные символы, вы можете назначать им разные теги (лигатуры). Эта функция особенно полезна для резервных копий или использования шрифтов на рабочем столе.Узнать больше…

шрифтов Foundation Icon 3 | Детская площадка от ЗУРБ

Как они были построены

Здесь, в ZURB, мы создали эти значки с особыми стандартами, которые дают единый голос и стиль для разработки удивительного набора шрифтов, который каждый сможет любить, наслаждаться и использовать на своем веб-сайте. Некоторые стандарты включают:

  • Геометрический Все значки состоят из основных форм, таких как треугольники, квадраты, прямоугольники и круги.
  • Круглые углы Все значки сделаны с закругленными углами, чтобы они выглядели более мягкими и доступными.
  • Толщина линий Все значки выбирают более толстые линии, а не тонкие, чтобы значки можно было масштабировать, а также придать им дружественный вид, к которому мы стремимся.
  • Natural Angles Мы задали эти удельные градусы поворота, чтобы сохранить согласованность в целом.
  • Масштабируемость При создании этих значков мы думаем о том, как эти значки будут масштабироваться при малых и больших размерах.

После преобразования этих векторных значков в шрифт мы дали вам возможность иметь бесконечное количество размеров, цветов и стилей для значков, которые вам нужны, которые можно настраивать и стилизовать с помощью CSS.

Как ими пользоваться

С помощью этих значков мы упростили для вас работу! Просто скачайте шрифт и следуйте этим простым инструкциям. Вы будете зажигать в мгновение ока.

Слияние стилей

Очень легко подключить таблицы стилей пакета, чтобы оживить ваш новый значок веб-шрифта. После загрузки шрифтов вы сможете просто объединить файлы foundation-icons.css, и foundation-icons. [Eot / ttf / svg / woff] прямо в Foundation.

Напишите свою разметку

Мы использовали для элементов значков. Вы просто применяете соответствующие классы, соответствующие значку, который вы хотите использовать. Вот как выглядит разметка:

   

Стиль прочь!

Вы можете использовать несколько замечательных приемов CSS, чтобы начать изучение различных стилей. Мы сами придумали несколько, посмотрите их:

Скачать шрифты

Мы собрали несколько удобных пакетов загрузки, которые легко впишутся в ваш проект Foundation!

Загрузите шрифт

Попробуйте Foundation

Если вы еще не пробовали Foundation, мы настоятельно рекомендуем его.Вы будете кодировать быстрее и лучше в кратчайшие сроки!

Посетить Фонд

Мысли?

Перейдите к записи в блоге, чтобы узнать, что говорят другие, или сообщить нам, что вы думаете.

Ищете старый набор?

Мы удалили старую версию значков, потому что реализация была не очень доступной. Если вам все еще нужен доступ к ним, вы можете получить их на Playground.

простых иконок — шрифт npm

Простые значки:

Значок шрифта

Бесплатный шрифт иконок SVG для популярных брендов.Смотрите их все на одной странице на SimpleIcons.org. Вклады, исправления и запросы можно делать на GitHub. Автор Дэн Лич.

Установка

Установка CDN

Шрифт может быть получен из CDN, например JSDelivr или Unpkg. Просто используйте пакет NPM simple-icons-font и укажите версию в URL-адресе, например:

 
 

В этих примерах используется последняя основная версия. Это означает, что вы не будете получать никаких обновлений после следующего основного выпуска. Вместо этого вы можете использовать @latest для неограниченного получения обновлений. Однако это может привести к исчезновению значка, если он был удален в последней версии.

Настройка узла

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

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

После установки шрифт значков и шрифт таблицы стилей можно найти в node_modules / simple-icons-font / font . Вы можете использовать свой любимый инструмент для связывания, чтобы включить их в свой проект.

Установка PHP

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

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

Затем шрифт можно использовать, связав его с таблицей стилей в вашем файле HTML или PHP (см. Пример в разделе «Ручная настройка»).

Ручная настройка

Вы также можете загрузить последнюю версию пакета и скопировать содержимое папки font в свой проект. Затем укажите ссылку на файл CSS с помощью тега link в своем HTML:

.
  

Использование

Используйте любой из значков, доступных в простых значках, добавив следующие классы к узлу в вашем HTML. Используйте класс si - color , чтобы применить цвет бренда к значку.

  
  

Где [ИМЯ ЗНАЧЕНИЯ] заменяется именем значка, например:

  
  

В этом примере мы используем тег , но любой встроенный тег HTML должен работать так, как вы ожидаете.

Использование значков шрифтов в Xamarin.Forms: прощай, изображения, привет, шрифты!

Обновлено: узнайте о новейшем способе импорта шрифтов с помощью Xamarin.Forms 4.6 в моем последнем сообщении в блоге.

Всю свою карьеру в области разработки мобильных приложений я полностью использовал изображения и значки для конкретных устройств. Это изображения с правильным масштабированием и размером, подходящие для @ 1x, @ 2x, @ 3x, hdpi, xhdpi, xxhdi и т. Д., Что здорово, потому что они супероптимизированы для каждой платформы. Причина, по которой я это делаю, заключалась в том, что это дает очень единообразный внешний вид приложения во всех различных форм-факторах устройств, на которых оно может работать. Это также официальный способ, которым Google, Apple и Microsoft говорят вам делать это, и они даже предоставляют вам такие инструменты, как Asset Studio, чтобы помочь вам их создать.Однако мои глаза открылись, и я все на ШРИФТАХ! Да … ШРИФТЫ! Готов поспорить, вы думали, что я скажу SVG, но НЕТ, ШРИФТЫ!

Я имею в виду, посмотрите на все эти красивые значки прямо здесь. Бьюсь об заклад, вы думали, что это изображения … нет, они созданы из шрифта! Отличительной чертой подобных шрифтов является то, что они объединяют множество значков в один файл, и к ним действительно легко получить доступ с помощью определенного кода. кроме того, поскольку это шрифт, они должны правильно масштабироваться для разных форм-факторов 🙂

Еще несколько недель назад я понятия не имел, что Xamarin.В Forms есть отличная встроенная поддержка. Итак, давайте посмотрим, как их интегрировать.

Импортировать шрифт (НОВИНКА)

В последних версиях Xamarin.Forms теперь вы можете легко добавлять шрифты в свою стандартную библиотеку .NET. Просто отметьте их как EmbeddedResource как тип содержимого в свойствах.

Затем внутри любого файла (мне нравится AssemblyInfo.cs) вы можете добавить этот экспорт:

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

Здесь я использую шрифт Font Awesome, и я могу получить к нему доступ напрямую с именем семейства шрифтов «FA», которое я указал с Alias ​​.

В примерах кода ниже я показываю старый способ установки FontFamily , однако, если вы используете этот метод, вы просто сделаете FontFamily = «FA» .

Импортировать шрифт (СТАРЫЙ)

Когда я работал над приложением Xamarin.Forms, я получил отличный запрос на вытягивание, который интегрировал в приложение значки дизайна материалов. Это был мой первый опыт, когда я видел пользовательские шрифты для удаления кучи изображений, которые были одинаковыми на каждой платформе. Все, что вам нужно сделать, это взять файл ttf и добавить его в нужное место.

  • Android : добавьте его в папку Assets и убедитесь, что он помечен как AndroidAsset
  • iOS : добавьте файл шрифта с действием сборки: BundleResource и обновите файл Info.plist (шрифты, предоставляемые приложением, или ключ UIAppFonts).
  • UWP : добавьте файл в / Assets / Fonts / и убедитесь, что он помечен как Content

Семейство шрифтов доступа (СТАРЫЕ)

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

  
    
    
    

  

Превратите шрифт в код

Теперь нам нужно получить доступ к этим шрифтам! Вам понадобятся определенные коды для каждого значка в шрифте. К счастью, Андрей написал отличный инструмент для преобразования файла шрифта в код под названием IconFont2Code:

.

Также обратите внимание на этот замечательный репозиторий на GitHub, где вы можете загрузить полные вспомогательные файлы для Font Awesome и Material Icons.

Текст или FontImageSource

Теперь замечательно то, что мы можем установить любой элемент управления, с которым связано FontFamily , и просто установить свойство Text .

   

Если вы хотите использовать шрифт для изображения, можно использовать новый FontImageSource:

  
  

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

Доступ из привязок

Одна вещь, которую я считаю действительно крутой, заключается в том, что, поскольку вы можете использовать эти шрифты в любом элементе управления, у которого есть свойство text, это означает, что вы можете использовать его в Button!

В моем приложении Hanselman.Forms есть список социальных ссылок, которые мы хотим отображать в виде значков. Вот наш источник:

  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"
    }
};
  

В нашем XAML не может быть проще привязать данные к нему:

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

  

Доступ напрямую в XAML

Если вы хотите получить прямой доступ к одному из шрифтов из XAML, вам нужно будет экранировать ключ. Итак, если бы мы должны были преобразовать автомобиль из C # в экранированную строку:

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

Обращается на:

   & # xf10b; 
  

Затем, если бы мы хотели использовать его в изображении, код будет ссылаться на этот ключ:

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

  

Когда не использовать шрифты

В этом случае я использую шрифты, которые представляют собой значки внутри приложения, которые выглядят и выглядят одинаково на всех платформах.Я, как всегда, рекомендую использовать внешний вид платформы для значков на панелях инструментов и вкладках. Это обеспечит наилучший опыт ваших пользователей. Кроме того, имейте в виду, что они увеличат размер вашего приложения (значки материального дизайна были около 500 КБ!). Кроме того, я говорю: дерзай 🙂

Подробнее

Проверьте приложение Hanselman.Forms на GitHub и посмотрите, как идет работа, с новыми значками! Также не забудьте прочитать отличную документацию по шрифтам для Xamarin.Forms

.

Преобразование значков шрифтов в SVG

Эта статья была опубликована , и ее прочтение займет примерно .

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

Если вы еще не уверены, почему SVG — лучшая система значков, то я настоятельно рекомендую прочитать эту статью — сравнение шрифтов значков и встроенного SVG для систем значков в стиле cagematch.Многие компании и организации, включая Github, уже перешли на SVG и написали отличные статьи, объясняющие, почему они считают SVG лучшей альтернативой. Я перечислил несколько статей в конце этого поста для дальнейшего чтения.

Создание переключателя
1. Возьмите файлы шрифтов значков.

Значки шрифтов — это глифы шрифта. Они являются частью веб-шрифтов и, таким образом, определены в файлах и форматах веб-шрифтов.

Обычно я не использую иконочные шрифты, поэтому для демонстрации я направился в Fontello.com — онлайн-генератор шрифтов значков — для создания шрифта значков, с которым я могу работать для этого сообщения в блоге. Я выбрал несколько значков, затем создал шрифт значков и загрузил его.

Fontello создает папку, содержащую демонстрационную страницу, показывающую, как отображать значки на вашей собственной странице и какие имена классов использовать.

Файлы, созданные Fontello.

Среди сгенерированных файлов есть фактический шрифт, используемый для определения значков. Файлы шрифтов доступны в папке font .

Форматы файлов шрифтов, созданные Fontello.

Это файлы, которые вам нужны для продолжения. Мы собираемся использовать эти файлы для «извлечения» значков и преобразования их в SVG.

2. Выберите свой инструмент.

Чтобы преобразовать значки в SVG, мы можем использовать один из следующих инструментов:

  • fontello-svg : «инструмент командной строки для создания SVG-версий набора значков Fontello с соответствующим файлом CSS».
  • font-blast : «Вы можете использовать font-blast для извлечения значков из любого шрифта значков — Font Awesome, Foundation, чего угодно из Fontello и т. Д.”
  • Приложение Icomoon : веб-приложение для создания и создания наборов значков в форматах SVG и шрифтов значков.

Я уверен, что для этого есть другие инструменты, но я знаю только об этих.

Я собираюсь использовать в этой статье Icomoon и font-blast , потому что это общие инструменты, которые можно использовать с любым шрифтом, а не только один. И fontello-svg , и font-blast используются почти одинаково, и вы можете найти дополнительную информацию о fontello-svg в файле Readme репозитория Github.

3. Преобразуйте значки шрифтов в значки SVG.
3.1. Использование Icomoon

Чтобы преобразовать значки шрифтов в значки SVG с помощью Icomoon, нам сначала нужно их загрузить.

Значки вашего шрифта будут доступны в виде набора значков в приложении. Следующие шаги будут такими же, как если бы вы выбирали из набора уже доступных значков на странице:

  • Выберите значки, которые вы хотите загрузить в формате SVG.
  • Нажмите кнопку Создать SVG и многое другое .

Как и Fontello, Icomoon создает папку, содержащую созданные вами значки, а также демонстрационную страницу, показывающую, как их можно использовать на ваших собственных страницах.

Значки, преобразованные в SVG, доступны в папке SVG .

Для каждого значка соответствует один файл SVG. Набор готов для встраивания на вашу страницу.

Но перед тем, как встраивать значки, вы можете захотеть их спрайт.То есть создайте один спрайт SVG, содержащий все значки, а затем используйте этот спрайт для отображения каждого значка за раз, где бы это ни было на странице. Icomoon удобно генерирует для вас SVG-спрайт ( symbol-defs.svg ) вместе с полифилом ( svgxuse.js ) для старых браузеров, которые не поддерживают внешние ссылки на спрайты.

3.2. Использование font-blast

Чтобы преобразовать значки шрифтов в значки SVG с помощью font-blast , вам необходимо сначала установить font-blast с помощью npm через свой терминал.

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

Флаг -g (сокращение от global ) гарантирует, что вы можете запускать сценарий в любом месте на вашем компьютере, независимо от корневого каталога установки.

Как упоминалось в документации font-blast, «Вы можете сгенерировать значки из командной строки, вызвав сценарий с двумя параметрами: файл SVG шрифта и каталог, в котором должны быть размещены отдельные значки»:

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

Моя команда выглядела так:

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

Совет: вы можете перетащить свою папку в терминал, что как бы перетащит путь к этой папке в терминал, поэтому вам не придется вручную записывать или захватывать, а затем копировать и вставлять.

Выполняя указанную выше команду, font-blast извлекает значки из файлов шрифтов и создает значок SVG для каждого из них и сохраняет результат в папку, указанную в командной строке. Тогда мой терминал выглядит так:

Результат выполнения команды font-blast в терминале, сообщающий нам, сколько значков было найдено и преобразовано в SVG.

Папка svg-icons , которую я выбрал для сгенерированных файлов, выглядит так:

Файлы, созданные с помощью font-blast, показывают исходный файл шрифта, используемый для извлечения значков, и включают папку, содержащую сгенерированные значки SVG.

Как вы уже догадались, папка SVG содержит сгенерированные значки SVG:

Иконки SVG, созданные с помощью font-blast.

Значки готовы для встраивания на вашу страницу.

4. Sprite, Embed, Style, Animate, Have Fun!

Есть три основных способа создания и использования SVG-спрайтов.Я написал здесь обзор этих техник. Мы рассмотрим каждый из этих методов более подробно в следующей статье (или в серии статей), покажем плюсы и минусы каждого из них, а также способы создания и использования SVG-спрайтов, так что следите за обновлениями.

Вы можете подписаться на RSS-канал моего блога, чтобы быть в курсе новых статей. Электронная рассылка также находится в разработке!

Рекомендуемая литература:

Найдите похожие статьи в разделе: #svg

иконочных шрифтов против SVG — какой из них использовать в 2018 году?

Автор Cody Arsenault

Опубликовано 9 августа 2018 г.

Графические значки являются важным компонентом почти каждого веб-сайта или приложения.Хотя значки, как правило, имеют небольшой размер по своей природе, выбор формата для веб-значков — нетривиальное решение. Помимо стандартных форматов изображений, у веб-разработчиков есть два основных варианта: SVG или иконочные шрифты. Какой из них использовать? Давайте посмотрим, как эти два формата сравниваются с точки зрения производительности, гибкости и доступности.

Эволюция веб-иконок

До появления CSS веб-иконки должны были быть изображениями. Поскольку файлы изображений имеют большой размер, веб-разработчики всегда пытались найти альтернативные методы отображения небольших значков.Например, спрайты CSS позволили разработчикам хранить все свои значки в одном файле изображения, но проблемы с доступностью привели к тому, что они вышли из моды, так как шрифты значков появились на сцене примерно в 2012 году. Однако в последнее время разработчики переходят на использование масштабируемая векторная графика или SVG для своих веб-иконок.

Что такое иконочные шрифты?

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

Подобно спрайтам CSS до них, шрифты иконок начинают терять популярность у разработчиков. Для правильного отображения шрифтов значков часто требуется, чтобы браузер делал дополнительные запросы к серверу, что может привести к FOIT или миганию невидимого текста на значках, пока библиотеки шрифтов все еще загружаются.Если браузер не может интерпретировать шрифты, пользователь увидит только пустые символы. Поскольку такие сценарии неприемлемы для профессиональных веб-сайтов, все больше разработчиков обращаются к SVG.

Что такое SVG?

SVG (масштабируемая векторная графика) позволяют отображать векторную графику в браузере. SVG быстро становятся новым стандартом для веб-иконок и анимации. Они не только обеспечивают превосходное масштабирование, но и часто обрабатываются быстрее и надежнее, чем шрифты со значками. Поскольку векторная графика полностью состоит из кода, ее не нужно импортировать из больших внешних файлов.Они также намного меньше по размеру, чем ваши типичные JPG или PNG, а также большинство библиотек шрифтов значков.

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

Как работают SVG

SVG можно использовать как в обычном элементе в вашем HTML, используя атрибуты ширины и высоты для настройки размеров. Однако этот метод несколько ограничивает ваши возможности по настройке SVG.

Если вам нужна возможность дополнительно настраивать значки SVG прямо из HTML, вам нужно встроить SVG, просто вставив код прямо в документ HTML. Затем вы можете изменить цвет или применить фильтры, настроив его с помощью CSS. Вот как выглядит пример значка SVG:

  
    
    
     KeyCDN 

  

Приведенный выше код, вдохновленный Mozilla, отображает в браузере такую ​​графику:

Хотя код SVG на первый взгляд может показаться устрашающим, проектировать значки SVG и управлять ими обманчиво легко.Фактически, вы можете просто использовать такую ​​программу, как Adobe Illustrator, для создания собственной векторной графики для использования в качестве значков. Просто сохраните их как файлы SVG или вы можете сгенерировать код в интерфейсе Illustrator. Вы также можете экспортировать рисунки из Документов Google в виде файлов SVG.

Иконочные шрифты по-прежнему полезны?

Иконочные шрифты далеко не устарели. Хотя они не всегда являются ни самым эффективным, ни самым надежным вариантом, шрифты иконок по-прежнему относительно просты и легки в реализации, поэтому многие разработчики продолжают их использовать.В зависимости от количества используемых значков, возможно, не стоит тратить усилия на отключение шрифтов значков для SVG в ваших старых проектах; тем не менее, SVG — это окончательный путь в будущее, так что вы можете с тем же успехом использовать их в будущем.

Сравнение SVG и шрифтов значков

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

1. Размер

Если вы решите встроить свои SVG-файлы для добавления стилей, они могут быстро увеличиться в размере, и код может стать довольно громоздким.Также стоит отметить, что встроенный код SVG не кэшируется браузером пользователя. С другой стороны, внешние файлы SVG можно кэшировать. Если у вас много значков на одной странице, тогда шрифты значков могут обеспечить более плавное взаимодействие с пользователем, чем встроенные SVG. Конечно, если вы используете готовый набор шрифтов для значков, вы, вероятно, будете тратить ресурсы на неиспользуемые значки.

Здесь стоит отметить, что 10 оптимизированных значков SVG, вероятно, будут намного меньше, чем вся библиотека значков.Однако, если вы создадите свою собственную библиотеку пользовательских значков, используя только нужные значки, шрифт библиотеки значков в конечном итоге станет меньше.

2. Производительность

Иконочные шрифты можно кэшировать, что ускоряет их загрузку непосредственно из браузера. Однако обратная сторона этого заключается в том, что они создают дополнительный HTTP-запрос. С другой стороны, если вы встраиваете значки SVG, дополнительные HTTP-запросы не требуются, однако они не могут кэшироваться браузером.

Однако вы можете включить свои файлы SVG во внешний файл, что сделает их кэшируемыми браузером.Опять же, с точки зрения производительности разница в скорости будет зависеть от размера шрифта вашего значка / SVG. Попробуйте запустить тесты производительности с обоими, чтобы определить, какой из них загружается быстрее.

3. Гибкость

Оба формата можно стилизовать с помощью CSS, но встроенные SVG предоставляют гораздо больше возможностей, таких как обводки глифов и разноцветные значки. У вас даже могут быть анимированные веб-иконки.

4. Поддержка браузера

Какой бы формат вы ни выбрали для значков, вам, возможно, придется выполнить некоторые дополнительные действия, чтобы сделать их совместимыми со старыми браузерами.Поскольку они существуют дольше, шрифты-иконки получили более широкую поддержку. Любой, кто использует IE 6 или выше, который, вероятно, включает всех, должен видеть ваши шрифты значков. Если вы используете SVG, вы можете включить полифилл JS для поддержки тех, кто использует IE 8 или ниже.

Однако в 2018 году, когда большинство пользователей отказались от устаревших версий браузеров, это не должно вызывать особого беспокойства, независимо от того, выбираете ли вы шрифты значков или SVG. Единственный недостаток поддержки значков SVG и современных браузеров исходит как от IE, так и от Edge, которые неправильно масштабируют файлы SVG (рекомендуются атрибуты высоты и ширины).

5. Масштабируемость

Хотя и SVG, и шрифты значков являются векторными, браузеры интерпретируют шрифты значков как текст, что означает, что они подлежат сглаживанию. Поэтому SVG, как правило, выглядят немного резче, чем шрифты со значками.

6. Позиционирование

Поскольку шрифты значков должны быть вставлены через псевдоэлемент, размещение значков шрифтов может быть непростым. Возможно, вам придется учитывать line-height , vertical-align и letter-spacing среди других факторов, чтобы псевдоэлемент и фактический глиф идеально совпадали.Для SVG вам просто нужно установить размер.

7. Специальные возможности

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

Mozilla Developer Network содержит очень подробное руководство по SVG, в котором объясняется, как стилизовать значки с помощью встроенного CSS. В дополнение к Adobe Illustrator существует несколько инструментов, которые помогут вам реализовать значки SVG. IcoMoon — отличный ресурс для готовых SVG-файлов и значков шрифтов, а приложение IcoMoon позволяет создавать свои собственные.Если вы ищете что-то с открытым исходным кодом, Inkscape — это бесплатная программа для рисования векторных изображений, которая экспортирует файлы SVG. Такие инструменты, как Convertio, позволяют конвертировать другие форматы изображений в файлы SVG.

Важно отметить, что такие программы, как Illustrator и Inkscape, часто встраивают дополнительной информации в экспортируемые файлы SVG, которые вам не нужны . Поэтому вам следует запускать свои SVG-значки с помощью инструмента оптимизации, такого как SVGO или SVG Minifier, чтобы обрезать их перед добавлением на свой веб-сайт.

Помимо ресурсов, упомянутых выше, существует также множество веб-сайтов с иконками, которые предоставляют высококачественные векторы в качестве платных или бесплатных услуг.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *