Font Awesome и IcoMoon: работа с иконочным шрифтом. Начало работы Использование Sass или Less
Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome .
Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.
Что такое Font Awesome Icons и чем они полезны?
add_action("wp_enqueue_scripts", "enqueue_load_fa"); function enqueue_load_fa() { wp_enqueue_style("load-fa", "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); }
Вставляем иконки Font Awesome
Когда вы добавите код в вашу тему, вы будете готовы начать использовать иконки Font Awesome везде.
Найти полный список иконок можно на веб-сайте Font Awesome .
К примеру, если вы ищите иконку «Download», то просто вводите в поиск «download» и выбираете из доступных вариантов:
После выбора понравившейся иконки вы можете увидеть экран с разными размерами этой иконки. В центре экрана вы должны заметить небольшой блок кода:
Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим "Текст":
Вы можете вернуться к визуальной вкладке после окончания внедрения кода. После публикации записи вы увидите свою иконку во фронтенде:
Как увеличить размер иконки Font Awesome
Как вы видите в примере сверху, иконки довольно маленькие. Если вам нужно их увеличить, то нужно добавить несколько строк кода. К примеру, чтобы увеличить размер иконок в два раза, вам нужно добавит «fa-2x » в класс иконок.
Например, вот изначальный код иконки:
А вот код с увеличенной в 2 раза иконкой:
В реальной жизни иконка будет выглядеть теперь так:
Вот список кусочков кода, которые вам нужно добавить, чтобы изменить размер:
- fa-lg – увеличить на 33%
- fa-2x – увеличить в 2 раза
- fa-3x – увеличить в 3 раза
- fa-4x – …
- fa-5x – … ну вы поняли!
Вы можете также делать другие крутые штуки, например, использовать иконку Font Awesome как пункт в маркированном писке, добавлять анимацию и многое другое. На официальном сайте Font Awesome вы можете найти инструкцию , как можно менять шрифтовые иконки.
2. Как добавить Font Awesome на WordPress с помощью плагина
Если вам не нравится предыдущий способ, то вы можете установить плагин. Существует множество различных плагинов, где доступна эта функция, но одним из самых популярных является Better Font Awesome :
Вы можете попробовать использовать и другие плагины, но нам кажется, что этот наилучший по нескольким причинам:
- Он регулярно обновляется. Это важно, поскольку несколько популярных плагинов Font Awesome не обновлялись годами.
- Автоматически импортирует новый набор иконок Font Awesome.
- Позволяет вам добавлять иконки через шорткод или тот же код, что мы использовали.
Для начала установите и активируйте плагин.
Он добавит новый раздел меню Настройки → Better Font Awesome в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:
Добавление иконок
Чтобы добавить иконки к записям, вы можете использовать тот же метод, который мы показывали вам в ручной версии, или использовать шорткод. Преимущество использования шорткода состоит в том, что вам не нужно менять вкладку «Text» в вашем редакторе.
Формат шорткода, который вам нужен:
Где NAME – это название иконки на веб-сайте Font Awesome:
Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:
Visual Builder отображает это так:
Вы можете использовать тот же шорткод в обычном редакторе WordPress.
Если вы хотите изменить размер вашей иконки с помощью шорткода, то просто добавьте тэг класса с размером иконки:
Итоги
Вот и всё! Два разных способа добавить векторные иконки Font Awesome на ваш сайт WordPress. Мы предпочитаем ручной метод, поскольку он отнимает меньше времени и потом не нужно волноваться о потенциальной поломке плагина.
Но если вы не хотите трогать код темы, то лучше используйте плагин Better Font Awesome .
Теперь ваша очередь! А вы используете Font Awesome?
Иконки выводятся через псевдокласс ::before , поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент , но можно использовать и любой другой строчный элемент, например: , и др.
Для указывается два основных класса - fa и fa-icon , где вместо icon пишется имя иконки. Все имена доступны на этой странице.
Рис. 1. Иконки для видеоплеера
Чтобы добавить иконку с именем play напишем следующий код:
Сам элемент пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.
Размер любой иконки из набора мы можем изменить с помощью свойства font-size , переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу как показано в примере 1.
Пример 1. Размер иконок
Исходный размер
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Результат данного примера показан на рис. 2.
Рис. 2. Размеры иконок
Цвета
Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color , background , text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.
Пример 2. Оформление иконок через стили
Результат данного примера показан на рис. 3.
Рис. 3. Цветные иконки
Font Awesome вводит специальный класс fa-inverse , изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.
Поворот иконок
Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:
- fa-rotate-90 - поворот на 90º по часовой стрелке;
- fa-rotate-180 - поворот на 180º;
- fa-rotate-270 - поворот на 270º;
- fa-flip-horizontal - отражение по горизонтали;
- fa-flip-vertical - отражение по вертикали.
Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).
Пример 3. Поворот и отражение иконок
Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.
Рис. 4. Преобразования иконки
Анимация
Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse - пошаговое вращение. Ниже показано вращение футбольного мяча.
Объединение иконок
Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент
Иконочный шрифт - это тенденция, которой следуют всё больше и больше разработчиков. Если вы ещё не в теме, то эта статья для вас. Прежде всего мы рассмотрим плюсы и минусы данного подхода. Затем сравним два популярных набора иконочных шрифтов, и рассмотрим различные примеры.
Что такое иконочный шрифт?
Иконочный шрифт - это тот же шрифт. Однако, вместо букв и цифр, в них содержатся символы и специальные знаки. Вы можете оформлять их через CSS точно так же, как делаете это с обычным текстом.
Плюсы и минусы
Существует немало плюсов от замены растровых изображений иконочными шрифтами. Вот некоторые из них:
- оформление через CSS;
- векторная природа позволяет легко масштабировать их до любых размеров без потери качества;
- один HTTP запрос вместо нескольких, в отличии от растровых изображений;
- широкая браузерная поддержка, включая IE6.
Значит ли это, что иконочные шрифты являются панацеей? Нет, конечно нет. Это отличный приём, который вы можете использовать в дизайне проекта, но в их использовании есть и парочка минусов. Например, если вы хотите показать сложное изображение, а не простой значок, то иконочный шрифт - не лучшее решение.
Так же, как правило, они могут отображаться только в одном цвете, если вы не воспользуетесь CSS трюками. Кроме того, некоторые иконки могут быть созданы под конкретные размеры, например 16×16, 32×32, 48×48 и т.д. Если по некоторым причинам вы измените размер на 25×25, то результат может быть нечётким.
Стоит отметить, что помимо иконочных шрифтов есть ещё одно популярное решение: SVG. Их использование может решить некоторые проблемы. Например, вы можете использовать более одного цвета.
Так же мы рассмотрим четыре различных примера использования иконочных шрифтов.
Font Awesome
Font Awesome - это библиотека, содержащая 439 иконок. Она является абсолютно бесплатной как для личного, так и для коммерческого использования. Изначально она разрабатывалась для Bootstrap, однако вы можете использовать её и отдельно.
Работа с Font Awesome
Самый простой способ подключить Font Awesome - подключить через CDN. Если же вы работаете оффлайн - вам придётся скачать набор иконок.
Так же вам необходимо подключить CSS и сгенерированные шрифты в различных форматах.
Для использования иконок, вы должны разместить их внутри элемента span или i . Затем, нужно присвоить им два класса: fa плюс второй класс, который должен соответствовать названию иконки, например fa-home. можно найти названия всех доступных иконок.
Дополнительную информацию и множество примеров можно найти на этой странице.
Теперь давайте рассмотрим несколько примеров.
Font Awesome. Пример #1
В первом примере, мы создаём вертикальное меню. Сначала помещаем иконки внутри элемента i и вдвое увеличиваем их размер, используя предопределённый класс fa-2x. Затем оформляем их с помощью CSS.
HTML будет выглядеть следующим образом:
А вот и CSS:
Nav li { background: #ededed; height: 80px; width: 80px; line-height: 80px; text-align: center; } nav li:not(:first-child) { margin-top: 1px; } nav li a { outline: none; position: relative; width: 100%; height: 100%; } nav i { color: steelblue; vertical-align: middle; } nav li a:after { background: #ededed; content: attr(data-name); display: none; margin-left: 1px; width: 160px; height: 80px; left: 80px; position: absolute; font-size: 1.2em; } nav li a:hover:after { display: inline-block; }
Font Awesome. Пример #2
В следующем примере мы создадим простой социальный виджет. Снова помещаем иконки внутри элемента i, удваиваем их размер. Затем оформляем с помощью CSS.
HTML для одной иконки будет выглядеть следующим образом:
CSS для стилизации значков:
Section a { padding: 7px; color: black; } section i { vertical-align: middle; transition: color .3s ease-in-out; } section a:nth-child(1):hover i { color: #3b5998; }
Font Awesome. Пример #3
В третьем примере мы используем значки для формы авторизации. Применяем другой предопределённый fa-fx класс, чтобы установить фиксированную ширину (примерно 1.25em).
HTML и CSS похожи на предыдущие. Результат .
Обратите внимание на иконки в форме, а также на социальные ссылки.
Иконки IcoMoon
IcoMoon - это ещё один популярный иконочный шрифт. На этот раз мы можем выбрать из двух пакетов: один с открытым исходным кодом, другой премиум. Более детальную информацию можно найти . В зависимости от выбранного пакета, количество и формат доступных значков будет отличаться. Например, в бесплатном пакете 450 иконок, в платном 1266.
Заключение
В этой статье я максимально просто и доступно расскажу о том, что такое шрифт с иконками Font Awesome, как его установить и объясню несколько примеров применения.
Что такое шрифт Font Awesome?
Шрифт Awesome нужен для того, чтобы использовать иконки, не загружая при этом на сайт какие-либо изображения (подборки иконок и тд). Данный шрифт (в версии 4.1) включает в себя 441 иконку, которые становятся доступны при применении класса конкретной иконки для элемента. Но об этом позже. Ниже Вы можете увидеть малую часть примеров иконок:
Плюсы шрифта
- Бесплатно
- Простой доступ через CSS
- 441 иконка (в версии 4.1)
- Работает в IE
- Масштабируемость
- Отлично отображается в читалках и i-технике!
- Многие дизайнеры уже оценили и используют шрифт!
Как установить шрифт Font Awesome (с иконками)?
1. Скачиваем шрифт с сайта http://fontawesome.io/ . Весит немного, примерно 400 Кб.2. Копируем распакованные файлы в Ваш проект (например, где индексный файл). По названиям файлов скорее всего совпадений не будет с уже имеющимися, так как названия у них достаточно специфические.
3. Подключаем файлы в head Вашего проекта. Предлагаю два варианта - если лежит выше по директории и если в одной.
4. Используем шрифт . Смотрим пример ниже:
Иконка фото
Иконка Check/Галочка
Примеры шрифт Font Awesome
Допустим идёт проработка каких-либо действий по списку:
- Готово
- Готово
- Загружается
- Ожидание
Иконки ожидания:
Цитата:
Как жаль, что не дано
Нам вовремя понять,
С кем можем мы найти,
А с кем лишь потерять…
Поворачиваем иконки:
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Awesome — это набор векторных иконок. А точнее шрифт состоящий не из букв и цифр, а из картинок. И эти изображения, так как они по сути являются шрифтом, можно оформлять (модифицировать) с помощью CSS стилей, устанавливать для них цвет, размер, тень и многое другое. Что согласитесь очень удобно.
В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!
Как установить шрифт Awesome на сайт
Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку .
Теперь подключите в секции вашего сайта стили Awesome:
Альтернативный способ подключения шрифтов Awesome
Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел :
Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.
Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.
Как использовать шрифты awesome на сайте
После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:
- задать соответствующие классы для элементов и ;
- добавить к нужному элементу с помощью псевдоэлементов :before , :after и соответствующего значения свойства content .
Пример использования шрифтов Awesome
Для одного из сайтов я использовал следующий код (для элемента использованы стили шрифта awesome версии 4.7.0):
Поставка вычислительной техники и ПО
Построение систем охранного телевидения и видеонаблюдения
Разработка систем контроля и управления доступом
Проектирование и монтаж ЛВС/СКС и телефонии
В браузере результат выглядит так:
Где посмотреть иконки Awesome для сайта
Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android ?
Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free
Например, изображению Android соответствует следующий код:
На экране он выглядит так:
Какую версию шрифтов Awesome лучше использовать на сайте
Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы
Похожие статьи
