Font awesome примеры. Font Awesome и IcoMoon: работа с иконочным шрифтом. Что такое иконочный шрифт
Здравствуйте, друзья.
Сегодня новая статья из рубрики "Дизайн".
Кто следит за моим блогом знают, что пару дней назад я обновил дизайн блога. Так вот, все иконки, которые вы видите напротив пунктов меню и рубрик, а также в некоторых заголовках, например, во вкладках между переключением популярных и обсуждаемых записей, возле заголовка похожих статей в конце текста и возле заголовка количества комментариев, это все не картинки, а специальный шрифт Font Awesome, с помощью которого можно без проблем делать хорошие качественные иконки.
Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.
И в большинстве случаев это сделать намного проще, чем каждый раз прописывать стили и выводить картинку. Также не приходится прописывать дополнительные стили по выравниванию, цвету и так далее, так как иконки выводятся шрифтом и совпадают с общими стилями того блока, куда их разместили.
В общем, штука очень крутая. Я когда делал свои первые заказы, столкнулся с этими иконками и мне они доставили очень много неудобств. Я просто не знал, как ими пользоваться, и в некоторых случаях просто заменял эти иконки на изображения. Сейчас же я не вижу в их использовании абсолютно никаких проблем. Достаточно подключить шрифт Font Awesome к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.
Как подключить иконки Font Awesome к сайту
Существует 2 способа подключения:
- Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
- Скачать файл иконок Font Awesome с официального сайта и подключить его в шаблон, как и обычный файл стилей. Работа сайта становится заметно быстрее.
Рассмотрим оба варианта более подробно.
Вариант 1
Заходим на официальный сайт Font Awesome и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" > |
Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.
На этом подключение закончено. Остается только зайти на эту страницу и выбрать подходящую иконку. Жмем на понравившуюся иконку и попадаем на страницу с вариантами различных размеров иконок, чтобы вы понимали, как она будет выглядеть при разных размерах шрифта. Также там будет и код, который будет выводить иконку.
Этот код вставляем в любое место, где хотим отобразить иконку.
Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.
Необходимо размещать код в файлах шаблона или в каких-то текстовых элементах. Например, в текстовом виджете в самом поле ввода содержимого, иконки работают. Таким образом у меня работает виджет популярных и обсуждаемых записей. Остальные же иконки прописаны в верстке, как самого шаблона, так и плагинов.
Вариант 2
Скачиваем папку с файлами отсюда .
Загружаем все файлы в корень темы ко всем папкам и файлам. Я не углублялся, нужно ли загружать только один конкретный файл или все папки, поэтому загрухил все, что было внутри архива.
Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом - в шапку сайта.
< link rel = "stylesheet" href = "http://ваш домен/wp-content/themes/название папки с темой/css/font-awesome.min.css" > |
Вот такой простой, но крайне полезный материал ля тех, кто любит что-то поделать с дизайном своего сайта. Незачем теперь использовать изображения, уменьшать их в фотошопе, обрезать и так далее. Достаточно подключить шрифт Font Awesome и использовать его возможности.
Изменение цвета иконок
Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:
fa-pencil-square-o
< span class = "s" > fa - pencil - square - o < / span > |
Если хотите данной иконке задать конкретный цвет, тогда добавляем данный класс в свой файл стилей и внутри него пишем цвет, а также размер, стиль шрифта и дргие стили по вашему желанию. Нюанс заключается в том, что иконка выводится в псевдоэлементе before, поэтому именно ему и нужно прописывать стили. Например:
Fa-pencil-square-o:before{ color: #111; /*черный цвет*/ font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/ }
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. Для этого посетите страницы
Иконки выводятся через псевдокласс ::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 - пошаговое вращение. Ниже показано вращение футбольного мяча.
Объединение иконок
Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент
Дорогие читатели, приветствую Вас! Рассказать о шрифте я планировал достаточно давно, в своих проектах активно его применяю и сегодня приведу несколько аргументов в его пользу.
Если Вы до сих пор используете растровые изображения для небольших графических элементов на сайте, то вынужден огорчить — при загрузке они создают дополнительные http-запросы к серверу, а при масштабировании теряют четкость.
Раньше для снижения числа запросов я объединял графические элементы дизайна в , такое решение для оптимизации скорости загрузки сайта актуально по сей день. Однако проблема масштабирования таким образом не решается и при увеличении изображений они теряют привлекательный внешний вид.
Содержит огромный набор векторных иконок, которые отлично масштабируются и превосходно выглядят на экранах высокого разрешения! На сайт они используются повсеместно: в форме поиска, в списке рубрик, возле даты публикации статьи, а также в кнопках социальных сетей и других элементах оформления.
Преимущества и недостатки иконочных шрифтов
Традиционные изображения с давних пор хорошо себя зарекомендовали в качестве графических элементов оформления сайта, в современную эпоху их постепенно вытесняют новые возможности CSS3, SVG и шрифты с иконками.
С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:
- В коллекции более 500 бесплатных векторных иконок для сайта.
- Иконки масштабируются до любого размера без потери качества.
- Стилизация с помощью CSS — размер шрифта, цвет и другие свойства.
- Не требуется включенная поддержка в браузере.
- Кроссбраузерность (IE7 и выше), поддержка мобильных браузеров.
Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:
- В отличие от картинок, которые одинаково отображаются в различных браузерах, шрифты могут выглядеть по разному в зависимости от браузера и операционной системы.
- Дизайнеры детально проработали значительное количество иконок, однако существует вероятность, что Вы не найдете нужную для своего проекта.
Как подключить шрифт Font Awesome
Первый и самый простой способ подключить шрифт — загрузить его с внешнего CDN, вставляя в секцию
следующую строку: <"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" >Второй способ заключается в ручной установке шрифта Font Awesome на свой хостинг. Загрузите архив с официального сайта, распакуйте и сохраните папки css и fonts на сервере в каталог font-awesome . Подключается аналогично, меняя лишь путь к файлу:
<link rel ="stylesheet" href ="../font-awesome/css/font-awesome.min.css" >Как использовать иконки Font Awesome на сайте
Для того чтобы вставить иконку на страницу поступаем следующим образом: находим на сайте нужную иконку и копируем ее код, затем вставляем в HTML-режиме:
class ="fa fa-twitter" >i >
На официальном сайте проекта есть документация и дополнительные примеры использования.
Иногда элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML, тогда применяют псевдоклассы в селекторах CSS.
Я покажу как это сделать на примере виджета категорий . Посмотрите на фрагмент исходного кода:
<div class ="widget_title" > Рубрики блогаdiv > <ul > <li class ="cat-item cat-item-5" > <a href ="/category/wordpress/" > WordPressa > li > ul > .cat-item :before { content : "\f07c" ; font-family : FontAwesome; color :#393 ; padding-right :10px }Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:
Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.
На этом завершаю краткий обзор, если появились вопросы — задавайте в комментариях. Используете ли Вы иконки Font Awesome на своем сайте, быть может другой шрифт?
CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.
Мы создаем каждый набор иконок индивидуально под каждый сайт, что позволит вам изменить иконки быстро и без лишней мороки. Также по этому адресу почты мы можем идентифицировать какой набор иконок ваш, а это значит, что вы можете управлять своими наборами.
Иконки для сайта. Быстро.
Вам не придется тратить время на файлы на вашем сервере. Вы получите все 675 иконки плюс наборы стилей - все оптимизировано для быстрой загрузки.
Легкие обновления
Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).
Или
Расширенная кастомизация Легко
Использование CSS
- Вставьте нижеследующий код в тег в HTML-код вашего вебсайта.
"path/to/font-awesome/css/font-awesome.min.css" >
- Посмотрите примеры
Использование Sass или Less
Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.
- Скопируйте полностью папку font-awesome в папку вашего проекта.
- В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path
соответственно, для того, чтобы указать путь к папке со шрифтами.
@fa-font-path : "../font" ;
Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.
- Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
- Посмотрите примеры для начала работы с Font Awesome!
Или
Продвинутый уровень Профи
- Добавьте эту строку в Gemfile вашего приложения:
gem "font-awesome-less"
- Далее запустите:
$ bundle
- Или установите в ручную:
$ gem install font-awesome-less
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less:
- Добавьте нижеуказанную строку в Gemfile вашего проекта:
gem "font-awesome-sass"
- Далее запустите:
$ bundle
- Или установите вручную:
$ 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) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. данной проблемы.
Поиск
Подписка
