Font awesome примеры. Начало работы

Иногда элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML, тогда применяют псевдоклассы в селекторах CSS.

Я покажу как это сделать на примере виджета категорий . Посмотрите на фрагмент исходного кода:

Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:

Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.

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

Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome .

Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.

Что такое Font Awesome Icons и чем они полезны?

Вставляем иконки 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?

CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.

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

Иконки для сайта. Быстро.

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

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Или

Расширенная кастомизация Легко

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

1. Вставьте нижеследующий код в тег в HTML-код вашего вебсайта.

   "path/to/font-awesome/css/font-awesome.min.css" >

2. Посмотрите примеры

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

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

1. Скопируйте полностью папку font-awesome в папку вашего проекта.
2. В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.

   @fa-font-path : "../font" ;

   Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.

3. Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
4. Посмотрите примеры для начала работы с Font Awesome!

Или

Продвинутый уровень Профи

1. Добавьте эту строку в Gemfile вашего приложения:

   gem "font-awesome-less"

2. Далее запустите:

   $ bundle

3. Или установите в ручную:

   $ gem install font-awesome-less

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less:

1. Добавьте нижеуказанную строку в Gemfile вашего проекта:

   gem "font-awesome-sass"

2. Далее запустите:

   $ bundle

3. Или установите вручную:

   $ gem install font-awesome-sass

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss:

@import "font-awesome-sprockets" ; @import "font-awesome" ;

Дополнительная информация

Валидаторы

Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.

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

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом:before . Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку "обновить" или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. данной проблемы.

На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:

Что такое Font Awesome

Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.

Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество . Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.

Способы добавления своих иконок

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

Сложный способ редактирования Font Awesome

1. Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки .
2. Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
3. Поделитесь своей веткой с сообществом Font Awesome. Проверьте наличие открытых проблем, связанных с вашей веткой, и поделитесь своим репозиторием.

Простой способ внесения изменений в Font Awesome

Существует несколько онлайн сервисов, позволяющих кастомизировать Font Awesome. Вот наиболее популярные:

• Fort Awesome : https://fortawesome.com/ (от @davegandy, создатель Font Awesome) — Платный сервис , от создателя Font Awesome, пробный период — 14 дней.
• Fontello : http://fontello.com/ — Бесплатный сервис, удобный если вам нужно один раз изменить набор своих иконок.
• IcoMoon : http://icomoon.io/app/#/select — Онлайн сервис, который представляет много различных возможностей с редактированием и добавлением иконок. Бесплатный.
• Fontastic : http://fontastic.me/ — Еще один сервис, есть возможность генерации svg спрайтов, есть регистрация и управление вашими шрифтами. Бесплатный.

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

Добавление иконок через Icomoon

IconMon — онлайн сервис для создания собственных шрифтов из иконок для использования на сайтах или в мобильных и дектопных приложениях. Допустим у вас подключен Font Awesome, а вам нужно добавить иконки из других шрифтов или вообще свою собственную иконку с вашим логотипом. Для этого вы создаете новый проект в IconMon, импортируете в него Font Awesome шрифт, если нужно то другие шрифты или свои иконки в виде шрифтов/svg картинок. Затем вы скачиваете получившийся шрифт и используете в своем приложении вместо Font Awesome. Ниже я покажу как это делать пошагово.

IconMon: начало работы

Публикация готового сета иконок Iconmoon на сайте

Скачав архив вы можете подключить его на своем сайте вместо Font Awesome и использовать иконки уже из этого набора, включая вашу собственную иконку. Для подключения на сайте нам понадобятся файлы из папки fonts и style.css — заливаем их к себе на сайт (при необходимости style.css можно переименовать или вообще добавить контент из него в свой css файл, который был использован на сайте ранее). Обратите внимание, что разместив font и css у себя на сайте относительный путь к шрифтам в css файле мог изменится. По этому откройте уже загруженный на ваш сайт css код и убедитесь, что к шрифтам прописаны верные пути. Вот тут я красным выделил место, где нужно проверить пути.

@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?29mi8v");
src: url("fonts/icomoon.eot?29mi8v#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?29mi8v") format("truetype"),
url("fonts/icomoon.woff?29mi8v") format("woff"),
url("fonts/icomoon.svg?29mi8v#icomoon") format("svg");
font-weight: normal;
font-style: normal;

После успешного переноса файлов iconmon на сайты использовать иконки можно таким образом:

Домой

Как обновлять ваш сет с иконками в будущем

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

1. Хранение ваших проектов в облаке Iconmon — это платная услуга. При регистрации в Iconmon можно выбрать подписку, оплатить ее и ваши проекты шрифтов будут храниться в вашем аккаунте. Вы всегда сможете изменить их, поставить версию выше, скачать и использовать.
2. Если вы не чистили кэш браузера , то ваши проекты также останутся при повторном заходе на IconMon и вы сможете легко добавить новую дополнительную иконку в ваш проект и сохранить себе обновленный шрифт. Главная проблема в том, что после того, как вы почистите кеш в браузере, все это будет удалено.
3. Настройки проекта в файле selection.json — наиболее подходящий вариант для нас. Во-первых — это бесплатно. Этот файл вы скачиваете в архиве со шрифтом каждый раз, когда генерируете его.
   Просто храните этот файл и в будущем можно будет заходить на IconMo и импортировать ваши проекты через него.

Заключение

Возможно есть и более удобные способы добавления своих иконок в Font Awesome, но они или платные или требуют более глубоких технических знаний. Этот же способ с использованием IconMon — прост, бесплатен и достаточно удобен. Если у вас появились какие-нибудь сложности, то добро пожаловать в комментарии. С радостью помогу.

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

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

Иконочный шрифт - это тот же шрифт. Однако, вместо букв и цифр, в них содержатся символы и специальные знаки. Вы можете оформлять их через 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.

Заключение