Откройте для себя векторную графику и стоковые иллюстрации на тему «иконки»

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

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

Встраивание

Встраивайте свои значки в HTML-код своей страницы (а не во внешний файл изображения). Здесь мы использовали нестандартные и .

Спрайт

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

Внимание! В Chrome проблема, из-за которой не работает в разных доменах

Внешнее изображение

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

Шрифт иконки

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

Используйте и , чтобы изменить внешний вид иконки.

CSS

Вы также можете использовать SVG в своем CSS (** обязательно экранируйте любые символы **, например, от до при указании шестнадцатеричных значений цвета). Когда никакие размеры не указаны через и в , иконка заполнит доступное пространство.

Атрибут необходим, если Вы хотите изменить размер иконок с помощью

Обратите внимание, что атрибут является обязательным

Доступность

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

Как сделать иконку для сайта HTML?

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

Рисуем Favicon в Sketch или Photoshop

Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:

1. Открываем редактор и рисуем иконку.
2. Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.
3. Затем одновременно нажимаем клавиши Shift + Cmd + E.
4. После этого нажимаем на кнопку Export Selected…

То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.

Большинство редакторов не умеют экспортировать в .ico по умолчанию. Придется скачать сторонний плагин для Фотошопа или шаблон для Sketch.

Преобразуем готовое изображение в фавиконку

Если уже есть рабочий вариант дизайна в неподходящем формате (.jpeg, .gif), можно конвертировать его в .png. Для этого сойдет любой базовый редактор изображений.

1. Открываем будущую иконку.
2. Меняем размер.
3. Указываем нужный размер и формат. Сохраняем.
4. Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
5. Указываем расширение .png.

Готово!

Рисуем значок в браузере

Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:

1. Рисуем любую картинку во встроенном редакторе.
2. А потом нажимаем на кнопку Download внизу.

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

В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.

Конвертируем текст или эмоджи в значок

Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.

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

Но я попробую скачать иконку с эмоджи:

1. Нажимаю на соответствующий конвертер.
2. Кликаю по названию понравившегося смайлика.
3. А потом жму на кнопку Download.

И все.

Font Awesome

Font Awesome — это библиотека иконок и готовый UI-инструментарий. Авторы проекта периодически масштабно его обновляют. Сейчас доступна шестая версия. После регистрации сервис бесплатно выдаёт персональную ссылку на набор компонентов и инструкцию, как внедрить его в веб-проект или приложение.

Количество: более шестнадцати тысяч.

Формат: отдельные иконки доступны в виде файлов SVG или в формате сниппетов с кодами HTML, React и Vue.js.

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

Бесплатные иконки лицензированы по CC 4.0: используйте их в коммерческом дизайне, но обязательно указывайте источник.

Что даёт оплата сервиса: тарифный план Pro открывает доступ к абсолютно всем графическим компонентам библиотеки и позволяет внедрять набор до 20 раз. Лицензия уровня Pro разрешает не атрибутировать Font Awesome. Цены и основные условия тарифов — здесь.

Редактирование иконок: меняйте цвета, толщину линий и размер иконок в вашем проекте с помощью строк кода. На Font Awesome есть инструкции и готовые правила.

Streamline

Streamline — ресурс с тысячами иллюстраций, эмодзи и иконок. У этого сервиса есть свой плагин для Figma, который даёт прямой доступ ко всему каталогу прямо из приложения. Полезная функция Streamline: из отдельных иконок можно составлять собственные коллекции и наборы.

Количество: более ста тысяч.

Формат: файлы PNG, SVG и PDF.

Что доступно без оплаты: вы сможете скачивать все иконки в любом количестве, но только в формате PNG и с низким разрешением. Неограниченно используйте их в любых проектах, личных и коммерческих, но обязательно делайте ссылку на сайт Streamline. Готовая ссылка для правильного указания источника есть в карточке каждой иконки под кнопкой Copy.

В специальном разделе Freebies у бесплатных иконок нет ограничений по формату и размеру: скачивайте их в виде PNG, SVG или PDF и задавайте нужное количество пикселей.

Что даёт оплата сервиса: с расширенной лицензией не нужно давать ссылку на источник иконок и пиктограмм. Ещё она убирает ограничения на формат файлов и размер иконок: вы сможете скачивать не только PNG, но и SVG или PDF файлы и задавать им размер до 4096 пикселей. Тарифы и планы — здесь.

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

Установка

Иконки Bootstrap публикуются в npm, но при необходимости их также можно загрузить вручную.

Менеджер пакетов

Установите Bootstrap Icons, включая SVG, спрайты иконок и шрифты иконок, с помощью npm или Composer. Затем выберите, кому Вы хотите добавить иконки в .

Скачать

Релизы публикуются на GitHub и включают иконки SVG, шрифты, лицензию и файл readme. Наш также включен, хотя наши сценарии npm в основном доступны для наших рабочих процессов разработки.

CDN

Включите таблицу стилей шрифтов иконок — на свой веб-сайт или через в CSS — из нашей CDN и приступайте к работе за секунды. для примеров.

Как подключить Favicon к сайту?

Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных

АТРИБУТ	ЗНАЧЕНИЕ
rel	icon указывает на тип используемого ресурса.
href	Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
type	Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.

Например, я скачал себе .ico с сайта. Затем делаю следующее:

1. Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
2. Потом открываю index.html и прописываю в head строчку <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>.

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

Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.

Характеристики значков

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

Формат

Тут есть из чего выбирать:

• .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
• .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
• .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.

.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах

У .png поддержка заметно шире

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

Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.

Размер

Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:

• 16 на 16 точек
• 32 на 32
• 192 на 192
• 512 на 512

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Iconshock

Сайт Iconshock — это библиотека векторных иконок в тридцати стилях дизайна: плоские или объёмные, Material или iOS, трендовые или Vista и многие другие.

Количество: более двух миллионов.

Формат: файлы PNG, SVG и AI. Есть иконочные шрифты.

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

Что даёт оплата сервиса: Iconshock предлагает несколько уровней Premium-подписок. Базовая платная подписка откроет доступ ко всем размерам и векторным форматам пиктограмм и 3D-иконкам. Платные подписки следующих уровней — это дополнительные графические инструменты, иллюстрации, шрифты.

Оплата подписки даёт право на коммерческое использование иконок без ссылок на источник. Условия трёх уровней платной подписки — .

Редактирование иконок: в карточке каждой иконки есть простой редактор, который меняет цвет элементов или контуров. Это бесплатная функция.