Содержание
Спрайт или иконочный шрифт?
Шрифт — удобная альтернатива спрайту. Не надо заморачиваться сеткой и расположением иконок, удобно добавлять новые символы, хотя для этого требуются дополнительные инструменты.
С помощью шрифта можно делать не только однотонные иконки, но и разноцветные.
Свой шрифт можно сделать, например, на сайте icomoon.io/app/. Примерная последовательность действий:
- Выберите иконки из набора и/или загрузите свои.
- Кликните внизу кнопку Font.
- На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.
Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.
Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах. Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:
также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно, например, эмоджи (проблема была описана в статье Криса Коэра Icon System with SVG Sprites).
CSS-tricks, кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.
Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.
Несмотря на удобство использования, проблемы поддержки шрифтов в данный момент заставляют сделать выбор в пользу иконок на SVG.
Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.
Как существуют способы вставки SVG на страницу?
Наборы готовых иконок
iconmelon.com
Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью .
Upd. от 4.07.2020: к сожалению, сайт давно не работает.
От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.
Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.
flaticon.com
Большая коллекция, иконки удобно поделены на категории. Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.
Наборы готовых иконок
iconmelon.com
Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью .
Upd. от 4.07.2020: к сожалению, сайт давно не работает.
От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.
Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.
flaticon.com
Большая коллекция, иконки удобно поделены на категории. Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.
Отображение иконок в браузерах без поддержки SVG
В данный момент самый удобный и надежный способ вставки — в виде спрайта.
Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:
Для старых Опер можно использовать такой селектор:
Таким образом можно добиться, чтобы иконки у пользователей с разными браузерами выглядели примерно одинаково.
Из существующих способов вставки иконок мне больше всего нравится шрифт. Он был бы идеальным, если бы не проблемы с поддержкой. мне не нравится смешиванием разметки и оформления, хотя радует доступность для CSS и возможность добавить и . Есть ещё один очень хороший, но плохо поддерживаемый способ, но это тема для отдельного поста.
UPD: Большое спасибо Роме Комарову за дополненния к тексту.
UPD от 04.04.14:
- Дополнение от Сережи Борончиева: SVG в data URI будет работать везде, если заэскейпить строку, например, с помощью (JS).
- Прекрасный пост от Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube!. Она предлагает использовать SASS, чтобы автоматически генерировать SVG-градиенты для использования в data URI.
Спрайт или иконочный шрифт?
Шрифт — удобная альтернатива спрайту. Не надо заморачиваться сеткой и расположением иконок, удобно добавлять новые символы, хотя для этого требуются дополнительные инструменты.
С помощью шрифта можно делать не только однотонные иконки, но и разноцветные.
Свой шрифт можно сделать, например, на сайте icomoon.io/app/. Примерная последовательность действий:
- Выберите иконки из набора и/или загрузите свои.
- Кликните внизу кнопку Font.
- На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.
Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.
Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах. Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:
также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно, например, эмоджи (проблема была описана в статье Криса Коэра Icon System with SVG Sprites).
CSS-tricks, кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.
Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.
Несмотря на удобство использования, проблемы поддержки шрифтов в данный момент заставляют сделать выбор в пользу иконок на SVG.
Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.
Как существуют способы вставки SVG на страницу?
Отображение иконок в браузерах без поддержки SVG
В данный момент самый удобный и надежный способ вставки — в виде спрайта.
Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:
Для старых Опер можно использовать такой селектор:
Таким образом можно добиться, чтобы иконки у пользователей с разными браузерами выглядели примерно одинаково.
Из существующих способов вставки иконок мне больше всего нравится шрифт. Он был бы идеальным, если бы не проблемы с поддержкой. мне не нравится смешиванием разметки и оформления, хотя радует доступность для CSS и возможность добавить и . Есть ещё один очень хороший, но плохо поддерживаемый способ, но это тема для отдельного поста.
UPD: Большое спасибо Роме Комарову за дополненния к тексту.
UPD от 04.04.14:
- Дополнение от Сережи Борончиева: SVG в data URI будет работать везде, если заэскейпить строку, например, с помощью (JS).
- Прекрасный пост от Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube!. Она предлагает использовать SASS, чтобы автоматически генерировать SVG-градиенты для использования в data URI.
Чем не удовлетворяли классические решения
- Мы можем сделать тучу png-иконок и класть их внутрь тэгов image. И подменять на JS-событиях наведения мыши. Когда я делал сайт на третьем курсе, этот метод реально работал. Хорошо было, и не надо было заботиться о множестве соединений с сервером. Может, когда круг замкнётся и HTTP 2.0 победит… а пока это накладно. Поехали дальше.
- PNG-спрайты + CSS/background-image – хорошо, но не хватает. Наши коллеги из DevExtreme жили так некоторое время… но упёрлись в необходимость хоть какой-нибудь стилизации. Ведь с PNG-иконкой беда, её даже в красный на клиенте не покрасишь! Они перешли на Font Icons, а мы?..
- Font Icons для написания приложения (не большой библиотеки, а именно приложеньица) оказался слегка неудобным в работе. Изменения иконок требуют некоторого обслуживания (сбор иконок, сохранение в файл шрифта, хинтинги всякие…) Если в интернете уже есть все нужные вам иконки в составе Font Awesome – лучше варианта и искать не стоит. Но если иконки нужны свои… мы пока пошли дальше.
- Unicode-символы для иконок. Сам пошутил, сам посмеялся.
- SVG + CSS/background-image – имеем нормальное масштабирование. Не имеем стилизации непосредственно иконки. Нет, мы можем это заворкараундить – hover-состояние в принципе делается изменением цвета бэкграунда, а disabled-состояние — в какой-то мере изменением opacity. Это рабочий вариант, такой была наша первая залитая в репозиторий версия. Но вот сам рисунок мы стилизовать не можем. Потому что он не в DOMe. А когда в доме чего-то нету – это беда… К тому, что не является частью документа, не применишь стили CSS, не подкрасишь, не изменишь.
У нас есть варианты
Есть другой способ добавить скрытый текст рядом с иконкой. Для него HTML и вспомогательный CSS-класс нужны чуть меньше, и он работает так же как в примере выше.
Вы можете использовать элемент , чтобы обернуть текст и визуально скрыть от пользователя. С помощью этого мы предоставляем вспомогательным технологиям описание иконки в текстовом виде, не изменяя дизайна кнопки.
<button type="button"> <svg class="svg-icon" width="10" height="10" viewBox="0 0 10 10" role="img" focusable="false" aria-hidden="true"> <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/> </svg> <span class="visually-hidden"> Меню </span></button>
Вспомогательный CSS-класс выглядит так:
.visually-hidden { // Убрать текст из потока. position: absolute; // Уменьшить его высоту и ширину до одного пикселя. height: 1px; width: 1px; // Скрыть выходящие за пределы контейнера элементы или текст. overflow: hidden; // Установить для clip нулевое значение. clip: rect(0, 0, 0, 0); // Текст не будет перенесён на вторую строку. white-space: nowrap;}
Что же получилось в итоге
- Наши иконки хранятся и лежат в отдельных SVG файликах, маленьких, любимых в VCS, понятных в диффах и открываемых в браузере
- Наши иконки в момент билдёжки собираются внутрь одного большого файлика – icons.svg. То, что было файликом, становится шаблоном.
- Этот файлик нужно положить внутрь HTML-разметки. Руками, инструментом сборки или JavaScript
На иконки можно ссылаться с помощью вот такой конструкции:
Конструкция является более явной и более семантически верной, чем при создании иконки при помощи background-image
- Шаблон иконки лежит внутри DOM и может быть модифицирован через CSS
- Конкретная иконка делается на основе шаблона, сама в DOM не попадает, но попадает в теневой DOM и её можно стилизовать благодаря наследованию CSS-свойств от родительского элемента-якоря use.
- Иконку можно стилизовать как угодно на уровне документа – задавать внутренним элементам SVG классы и красить/модифицировать для всего документа как душе угодно и как CSS позволяет
- Для одной конкретной иконки можно модифицировать два цвета – ровно два. Один – цивилизованно, второй – благодаря магии. Магия очень сильная и работает везде, но магия имеет свою цену – будьте аккуратны в продакшене!
- JavaScript нужен максимум один раз, в процессе жизни страницы больше не используется
читалке Amazon Kindleлежат на ГитхабеGitHub Pages этого репозиторияUPDстилизацию 122-х настоящих иконокwww.flaticon.com
С этим читают
- Png to svg
- Как сделать SVG адаптивным с помощью CSS
- Svg
- Джош эмметт / josh emmett
- Обзор биржи textsale.ru: как стать исполнителем и сколько можно заработать
- Как изменить цвет текста в html
- Топ 35 красивых шрифтов на все случаи жизни
- Самостоятельно подключаем телефон к компьютеру через wifi
- Прибыльные cpa кейсы по арбитражу трафика и заработку на сайтах и партнерских программах (партнерках)
- Python string isupper islower upper lower functions example