Практически все интернет-сайты и приложения используют иконки для оформления интерфейса. Это и неудивительно, поскольку иконки упрощают восприятие. Семантически понятные изображения позволяют взаимодействовать с программами интуитивным образом, не привязываясь к текстам и не всматриваясь в интерфейс.
Собственно, подходов к применению иконок всего два. Или сделать их самостоятельно (нанять дизайнера), или использовать готовые решения. Исходя из личной практики - я сторонник готовых решений. Я считаю, что к 2022 году нарисованы миллионы иконок во всевозможных вариантах и комбинациях. Задача предпринимателя и команды разработчиков в том, чтобы решить некоторую проблему некоторой целевой аудитории. И на мой взгляд, для решения проблем не нужно самостоятельно рисовать иконки. Лучше направить ресурсы и усилия на улучшение функциональности приложения, или его маркетинг.
Какие бывают иконки?
В целом, иконки делятся на 2 вида. Это векторные (цифровые) иконки, и графические (растровые иконки). С точки зрения формата, векторные иконки содержат в себе цифры и формулы, а растровые - простой массив разноцветных точек (то есть, обычная картинка).
Векторные иконки - представляют из себя svg-файлы и другие подобные форматы. Такие файлы содержат набор координат и информацию о толщине линий, цвете и размере содержимого иконки. Плюс векторных иконок в том, что их можно масштабировать до бесконечности, не теряя в качестве. Второй плюс - экономичный размер готовых файлов. Такие иконки рисуют в специальных приложениях, например CorelDRAW. И в этом их минус, поскольку перерисовать готовую векторную картинку не так-то просто.
Растровые иконки - классический подход, файлы в формате .png, .jpeg, .gif и так далее. То есть, обычные картинки нарисованные в Photoshop, Paint или подобных приложениях. Плюс таких иконок в том, что можно быстро менять их содержимое в обычном редакторе картинок, и в открытом бесплатном доступе таких иконок существует гораздо больше. Минус растровых иконок - заметная потеря качества при изменении размеров.
Из личной практики, применяю И растровые, И векторные иконки. Но большее предпочтение отдаю именно вектору. Это более качественный и современный подход. И сегодня в нашем обзоре - известная сборка векторных иконок.
Что такое FontAwesome, и почему это лучшая библиотека иконок на все случаи жизни.
Есть такой полезный сайт, а скорее не сайт а уже целый сервис — FontAwesome. Это подключаемая программная библиотека унифицированных векторных иконок. Она прекрасно работает как в вебе, так и в прикладных приложениях.
Сделали её аж в 2012 году, и с тех пор нарисовали и опубликовали невероятные 16 тысяч иконок, выдержанных в едином стиле. Внутри библиотеки можно найти изображения практически для всех сфер жизни: электронная коммерция, обучение, медицина, строительство, финансы, и что угодно прочее. При этом, у FontAwesome существует ещё и платная версия, где у одной иконки есть несколько стилей.
С технической точки зрения, FontAwesome это шрифт / svg-картинки, которые рисуются браузером через CSS. То есть, это векторная графика, упакованная в CSS через шрифт. Такой подход позволяет менять размеры иконок любым образом без потери в качестве, менять их цвет, угол наклона и другие характеристики. Технология, скажем прямо, необычная. Но это и отличает уникальным образом проект FontAwesome — библиотеку «быстрых» и унифицированных векторных иконок.
Как добавить FontAwesome в свой проект?
Библиотеку можно подключить через мета-тег style / или js-файл. То есть, вместо копирования иконок «одна-за-одной» в виде файлов под каждую кнопку или раздел — мы скачиваем и устанавливаем библиотеку один раз, подключаем её внутри html-кода, и используем обычные html-теги. Вот так выглядит строка подключения внутри html-файла:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
А вот так выглядит иконка автомобиля 🚗 в применении к HTML-разметке страницы: <i class="fa-solid fa-car"></i> . То есть, HTML-тег i, внутри которого в названии класса указывается имя иконки.
Как узнать у какой иконки какой тег? Зайти на сайт проекта, и в большой красивой строке поиска ввести слово для поиска. Например: «Pen» или «Globe». Дальше выбрать нужную нам иконку и скопировать тег.
Я использую FontAwesome практически во всех своих проектах. И прежде всего, он нравится мне своей унификацией. Посетители сайта гораздо лучше реагируют на дизайн, выдержанный в однородном стиле. Это увеличивает лояльность к проекту и доверие к его содержимому. Так что, определённо рекомендую эту технологию.
Ссылка на сайт: fontawesome точка com
#программист #it #itтехнологии #обучениепрограммированию #информационныетехнологии #айтишник #программирование #программированиеснуля #программированиедляначинающих #айти #компьютерыитехнологии #обучение #образование #студенты #веб #сайт #вебдизайн #графика #фриланс
🔥 Понравилось? Подпишись! Победим восстание роботов вместе! 🔥
🚀 P.S. Ты можешь круто поддержать меня и проект "Войти в IT" на boosty! Так же, я публикую там более эксклюзивный и профессиональный, иногда немного личный контент. Хочешь посмотреть как автор выглядит в реальной жизни? Тогда жми: Ссылка 🚀
P.S.2 У меня ещё есть Telegram-канал. Там посты чуть попроще, и чуть повеселей. Ссылка
