Fa-tasks · юникод: f0ae · создано в: v2.0 · категория: веб-приложения

Font Awesome в меню

Использование данного шрифта — один из вариантов подключения иконки в меню WordPress. Здесь нужно внимательно изучить HTML код страницы, а точнее вашего блока навигации. Просматривая его увидите что-то вроде такого:

Каждый пункт меню имеет свой конкретный ID, для которого вы можете задавать стили отдельно. Кроме того, можно будет использовать класс для всего меню, для указания общих настроек. В style.css добавляете код, аналогичный следующему:

.menu-primary li abefore {
 font-family FontAwesome;
 padding-right 7px;
 /*font-style: normal;
 font-weight: normal;
 text-decoration: inherit;*/
}
 
/* Home menu item */
#menu-item-1616 abefore {
 content "\f015";
}
 
/* Pages menu item */
#menu-item-1413 abefore {
 content "\f0e8";
}
 
/* Categories menu item */
#menu-item-1414 abefore {
 content "\f15b";
}

Сравните код с картинкой выше и вы поймете логику: menu-primary — общий стиль для меню, а menu-item отвечает за конкретный пункт. В итоге получится такое.

Значение для параметра content найдете на сайте Font Awesome при переходе на страницу с конкретной иконкой.

Здесь и значение Unicode, и имя класса, который нужно использовать в тексте (как для первого примера).

Как подключить иконки Font Awesome к сайту

Существует 2 способа подключения:

  1. Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
  2. Скачать файл иконок Font Awesome с официального сайта и подключить его в шаблон, как и обычный файл стилей. Работа сайта становится заметно быстрее.

Рассмотрим оба варианта более подробно.

Вариант 1

Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.

На этом подключение закончено. Остается только зайти на эту страницу и выбрать подходящую иконку. Жмем на понравившуюся иконку и попадаем на страницу с вариантами различных размеров иконок, чтобы вы понимали, как она будет выглядеть при разных размерах шрифта. Также там будет и код, который будет выводить иконку.

Этот код вставляем в любое место, где хотим отобразить иконку.

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

Необходимо размещать код в файлах шаблона или в каких-то текстовых элементах. Например, в текстовом виджете в самом поле ввода содержимого, иконки работают. Таким образом у меня работает виджет популярных и обсуждаемых записей. Остальные же иконки прописаны в верстке, как самого шаблона, так и плагинов.

Вариант 2

Скачиваем папку с файлами .

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

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

Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом — в шапку сайта.

Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.

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

Изменение цвета иконок

Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:

Если хотите данной иконке задать конкретный цвет, тогда добавляем данный класс в свой файл стилей и внутри него пишем цвет, а также размер, стиль шрифта и дргие стили по вашему желанию. Нюанс заключается в том, что иконка выводится в псевдоэлементе before, поэтому именно ему и нужно прописывать стили. Например:

.fa-pencil-square-o:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

Аналогично можно прописать оформление и для всех иконок Font Awesome, если нет нужды делать каждую индивидуально. Например, получится:

.fa:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

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

На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.

Пока.

Интеграция

И½ÃÂõóÃÂøÃÂþòðÃÂàFont Awesome þÃÂõýàÿÃÂþÃÂÃÂþ ò Twitter Bootstrap, ð ÃÂðú öõ øÃÂÿþûÃÂ÷þòðÃÂàþÃÂôõûÃÂýþ ýð òðÃÂõ ÃÂÃÂüþÃÂÃÂõýøõ.

Bootstrap + Font Awesome

ÃÂÃÂÿþûÃÂ÷ÃÂùÃÂõ Font Awesome àBootstrap CSS.

  1. áúþÿøÃÂÃÂùÃÂõ ÿðÿúàÃÂþ ÃÂÃÂøÃÂÃÂðüø Font Awesome ò ÃÂðàÿÃÂþõúÃÂ.
  2. ÃÂðÃÂõü ÃÂúþÿøÃÂÃÂùÃÂõ font-awesome.min.css ò ÃÂðàÿÃÂþõúÃÂ.
  3. ÃÂÃÂúÃÂþùÃÂõ ÃÂðùû font-awesome.min.css ø þÃÂÃÂõôðúÃÂøÃÂÃÂùÃÂõ ÿÃÂÃÂàú ÃÂðùûðü ÃÂþ ÃÂÃÂøÃÂÃÂðüø, õÃÂûø ÃÂÃÂþ ýõþñÃÂþôøüþ.

    ÃÂðÿúð ÃÂþ ÃÂÃÂøÃÂÃÂðüø ýðÃÂþôøÃÂÃÂàþÃÂýþÃÂøÃÂõûÃÂýþ (òÃÂÃÂõ) ôøÃÂõúÃÂþÃÂøø àCSS-ÃÂðùûðüø.

  4. ÃÂýÃÂÃÂÃÂø ÃÂõóð ÃÂðÃÂõù html-ÃÂÃÂÃÂðýøÃÂÃÂ, ÿþüõÃÂÃÂøÃÂõ ÃÂÃÂÃÂûúàýð font-awesome.min.css.

  5. ÃÂñÃÂðÃÂøÃÂõ òýøüðýøõ ýð ÿÃÂøüõÃÂàøÃÂÿþûÃÂ÷þòðýøàFont Awesome ÿõÃÂõô ýðÃÂðûþü ÃÂðñþÃÂàýðô ÃÂòþøü ÿÃÂþõúÃÂþü!

ÃÂðÃÂÃÂþüýðàøýÃÂõóÃÂðÃÂøàBootstrap + Font Awesome àøÃÂÿþûÃÂ÷þòðýøõü LESS

ÃÂÃÂÿþûÃÂ÷ÃÂùÃÂõ ÃÂÃÂþàüõÃÂþô ôûàøýÃÂõóÃÂðÃÂøø Font Awesome ò Twitter Bootstrap øÃÂÿþûÃÂ÷ÃÂàLESS.

  1. áúþÿøÃÂÃÂùÃÂõ ÿðÿúàÃÂþ ÃÂÃÂøÃÂÃÂðüø Font Awesome ò ÃÂðàÿÃÂþõúÃÂ.
  2. ÃÂðÃÂõü ÃÂúþÿøÃÂÃÂùÃÂõ font-awesome.less ò ôøÃÂõúÃÂþÃÂøàbootstrap/less.
  3. ÃÂÃÂúÃÂþùÃÂõ bootstrap.less ø ÷ðüõýøÃÂõ ýð
  4. ÃÂÃÂúÃÂþùÃÂõ ÃÂðùû font-awesome.less ø þÃÂÃÂõôðúÃÂøÃÂÃÂùÃÂõ ÿõÃÂõüõýýÃÂàÃÂðú ÃÂÃÂþ ñàþýð ÃÂúð÷ÃÂòðûð ýð ôøÃÂõúÃÂþÃÂøàÃÂþ ÃÂÃÂøÃÂÃÂðüø.

    @FontAwesomePath:   "../font";
    

    ÃÂðÿúð ÃÂþ ÃÂÃÂøÃÂÃÂðüø ýðÃÂþôøÃÂÃÂàþÃÂýþÃÂøÃÂõûÃÂýþ (òÃÂÃÂõ) ôøÃÂõúÃÂþÃÂøø àÃÂúþüÿøûøÃÂþòðýýÃÂüø CSS-ÃÂðùûðüø.

  5. ÃÂõÃÂõúþüÿøûøÃÂÃÂùÃÂõ ÃÂðàLESS ò ÃÂûÃÂÃÂðõ øÃÂÿþûÃÂ÷þòðýøàÃÂÃÂðÃÂøÃÂýþóþ úþüÿøûÃÂÃÂþÃÂð. àôÃÂÃÂóþü ÃÂûÃÂÃÂðõ òÃÂõ óþÃÂþòþ ú ÃÂðñþÃÂõ.
  6. ÃÂñÃÂðÃÂøÃÂõ òýøüðýøõ ýð ÿÃÂøüõÃÂàøÃÂÿþûÃÂ÷þòðýøàFont Awesome ÿõÃÂõô ýðÃÂðûþü ÃÂðñþÃÂàýðô ÃÂòþøü ÿÃÂþõúÃÂþü!

ÃÂðÃÂÃÂþüýðàøýÃÂõóÃÂðÃÂøàBootstrap + Font Awesome Integration øÃÂÿþûÃÂ÷ÃÂàSASS øûø SCSS

ÃÂõ øÃÂÿþûÃÂ÷ÃÂõÃÂõ Bootstrap?

Font Awesome — ÃÂðñþÃÂðõàø ñõ÷ øÃÂÿþûÃÂ÷þòðýøàTwitter Bootstrap.

  1. áúþÿøÃÂÃÂùÃÂõ ÿðÿúàÃÂþ ÃÂÃÂøÃÂÃÂðüø Font Awesome ò ÃÂðàÿÃÂþõúÃÂ.
  2. ÃÂðÃÂõü ÃÂúþÿøÃÂÃÂùÃÂõ font-awesome.less øûø font-awesome.min.css ò ÿðÿúàÃÂðÃÂõóþ ÿÃÂþõúÃÂð.
  3. ÃÂÃÂúÃÂþùÃÂõ font-awesome.less ûøñþ font-awesome.min.css ø þÃÂÃÂõôðúÃÂøÃÂÃÂùÃÂõ ÿÃÂÃÂø ú ÃÂÃÂøÃÂÃÂðü (ÃÂü. ÿÃÂøüõàòÃÂÃÂõ).
  4. ÃÂñÃÂðÃÂøÃÂõ òýøüðýøõ ýð ÿÃÂøüõÃÂàøÃÂÿþûÃÂ÷þòðýøàFont Awesome ÿõÃÂõô ýðÃÂðûþü ÃÂðñþÃÂàýðô ÃÂòþøü ÿÃÂþõúÃÂþü!

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

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

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

Подключение и использование иконочных шрифтов

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»post-header»>

Чтобы просто и быстро добавить масштабируемые картинки к различным элементам сайта, без использования спрайт-изображений, можно применить иконочный шрифт, в котором собраны все необходимые иконки в одном стиле. В подавляющем большинстве случаев, символы добавленные таким образом, правильно отображаются в браузере интернет-пользователя и остаются четкими при увеличении и уменьшении масштаба веб-страницы. И хотя сами изображения элементов обладают довольно простым, но сегодня очень модным дизайном, их оформление, например цвет и фон, можно изменить без труда.
  Сервисов предоставляющих бесплатные, готовые сборки шрифтовых картинок достаточно, при этом разнообразие иконок в них может удовлетворить практически любые потребности при создании сайта или оформлении блога. В данной заметке речь пойдет о том, как подключить иконочный шрифт и использовать его при оформлении сайта.
  Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) — они бесплатны; второе — Font Awesome — предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.

Как подключить иконочный шрифт к сайту

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

  2. Скачать архив со всеми необходимыми файлами, извлечь содержимое папок CSS и Fonts, разместить извлеченные файлы на хостинге своего сайта в соответствующие папки и указать на них ссылки в секции вашего сайта следующим образом —
  — дать путь только к папке:
  — удаленно подключить файлы с CSS из соответствующей папки:

  3. После загрузки архива с фалами, извлечь только содержимое папки Fonts и подключить иконочный шрифт, используя правило CSS @font-face:@font-face {
  font-family: ‘fontello’;
  src: url(‘..путь-к-файлу/fontello.eot‘);
  src: url(‘..путь-к-файлу/fontello.woff‘) format(‘woff’),
  url(‘..путь-к-файлу/fontello.ttf‘) format(‘truetype’),
  url(‘..путь-к-файлу/fontello.svg#fontello‘) format(‘svg’);
  font-weight: normal;
  font-style: normal;
}

Как использовать иконочный шрифт на сайте

У каждого выбранного символа есть название и код, посмотреть их можно как на странице официального сайта, так и на демо странице из загруженного архива. Название, по совместимости, является так же и добавочным классом элемента, для которого нужна иконка, код используется как UTF-символ иконки. Способы добавления символов на страницу зависят от варианта подключения шрифта.
  Если воспользоваться вторым вариантом — подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:
  1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:
  2. Добавить класс с названием символа к нужному элементу:
  3. Добавить в CSS псевдоэлемент для элемента с иконкой, который будет содержать UTF-код желаемого символа и указывать на используемый шрифт (в данном примере — Fontello):ul li a::before {
  content: ‘\e80a‘;
  font-family: «fontello»;
  font-style: normal;
  font-weight: normal;
}  Если для подключения шрифта иконок использовать третий вариант — только файлы шрифтов, то для того, чтобы можно было добавлять иконки по средствам присвоения соответствующего класса-названия, в CSS нужно внести дополнительную конструкцию устанавливающую подключенный шрифт для этих элементов и для каждого указать относящийся к нему символ:::before,
::before {
  font-family: «fontello»;
  font-style: normal;
  font-weight: normal;
}
.icon-doc-inv::before {
  content: ‘\e801‘;
}
.icon-mail-alt::before {
  content: ‘\e805‘;
}но можно обойтись и без нее, запись вида:
/*иконки будут добавлены*/
.icon-doc-text-inv::before { content: ‘\e80e‘; font-family: «fontello»; }
ul li a::before { content: ‘\e801‘; font-family: «fontello»; }  — будет работать все равно.

  В Blogger никаких трудностей с подключением шрифтовых картинок нет, все способы описанные выше вполне подходят. Основная сложность заключается в отсутствии собственного хостинга, но эта проблема легко решается с помощью прямых ссылок с ГуглДиск и других или загрузки файлов и получения ссылок с Гугл Сайтов, все остальное — дело техники http://magentawave.com

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

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

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

Заходим на сайт сервиса iconmon.io и жмем кнопку IcoMoon App
При запуске IconMon вы попадете на экран управления проектом. В нем по дефолту уже будет список бесплатных иконок, которые нам предлагает IconMon. Так как наша задача была в том,
чтобы обновить шрифт Font Awesome, то первое что мы сделаем — это импортируем его в IcoMoon.
Жмем кнопку Import Icons (в верхнем левом углу) и выбираем файл fontawesome-webfont.svg из папки шрифтов, которую вы использовали ранее.
Отлично. После того, как мы добавили Font Awesome, загрузим и свою собственную иконку в svg формате тем же способом (Import Icons).
Теперь все необходимые иконки и наборы иконок загружены в систему мы можем по необходимости их немного исправить или просто изменить. Для этого в верхнем меню управления переключите режим с «Select» на «Edit» и выберите иконку в таблице иконок. При редактировании можно выполнять следующие операции: Разворот/Отражение иконки (Rotate), Масштабирование (Scale), Выравнивание (Align), Цвет (Color).
После редактирования (если оно было необходимо) и загрузки нужных иконок в IconMon нам нужно отметить те, которые будут в нашем новом шрифте. Для этого в верхнем меню выбираем (если не выбрано) Select и отмечаем нужные иконки. Также Вы можете выбрать сразу весь набор. У нас есть загруженный набор Font Awesome — справа от заголовка набора нажимаем на кнопку управления и выбираем Select All. Не забываем отметить нашу собственную иконку.
В нижнем правом углу экрана нажимаем Generate Font. После нажатия мы попадем на экран просмотра шрифта, который мы создали. На этом экране можно указать или исправить названия иконок

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

Также можно указать версию шрифта.
Убедившись, что все нужные правки созданы, нажимаем на кнопку Download и скачиваем новый шрифт.

Font Awesome в заголовке виджета

Вы можете добавить иконку в заголовок того или иного виджета в WordPress. Для этого вам только нужно узнать какой Class или ID у него указан (просматриваете HTML код). Далее в файле стилей добавляете что-то вроде:

#meta-3 .widget-titlebefore {
font-family FontAwesome;
padding-right 7px;
content "\f05a";
font-style normal;
font-weight normal;
text-decoration inherit;
}

В итоге возле заголовка выводится иконка.

Я тестировал все три варианта на данном блоге, но к сожалению, вместо иконок у меня выводились какие-то «кракозябры». Вероятно, что-то не так с кодировкой или из-за специфических настроек блога. Однако на другом проекте все иконки отобразились корректно, поэтому код полностью рабочий. Единственное были сложности с примером номер 2 (меню), общие свойства не хотели срабатывать и пришлось прописать font-family: FontAwesome для каждого из пунктов меню.

Зачем вообще нужны 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 детальнее.

Примеры

Много-много примеров в стиле Twitter Bootstrap.

Используйте наши иконки в:

  • Списки (как этот)
  • Кнопки
  • Группы кнопок
  • Навигация
  • Пред- и пост- идущие элементы в input
  • И много другого в вашем CSS

Новые стили в 3.0

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

Крутящаяся иконка во время загрузки…

Строчные иконки

Поместите тег иконки Font Awesome рядом с любым элементом или в тексте.

icon-camera-retro

 icon-camera-retro

Иконки появляются через псевдо-CSS-селектор :before.

Большие иконки

Для увеличения иконки до размеров родительского элемента, используйте классы , ,
или .

Увеличьте размер иконки используя класс (33% увеличение), ,
либо .

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

Если ваши иконки обрезаются по краям — убедитесь в корректной установке line-height.

Анимирование

Используйте класс — и Ваша иконка будет крутится. Рекомендуем использовать с и
.

Кручусь-верчусь — контент гружусь…

 Кручусь-верчусь - контент гружусь...

CSS3-анимация не работает в IE7 — IE9.

Границы & Впуклые иконки

Используйте классы и , либо для цитат и заглавных иконок в тексте.

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


Используйте множество классов в одном элементе ... создания своего уникального стиля.

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


Используйте множество классов в одном элементе ... создания своего уникального стиля.

Кнопки

Иконки Font Awesome отлично подходят для использования с кнопками. Вы так же можете использовать большие иконки и кнопки, и классы:
, , .

Не забудьте добавьте JavaScript для активации .

Списки

  • Списки
  • Кнопки
  • Группы кнопок
  • Навигация
  • Пост- и пред- идущие элементы

Замените знак списка своим собственным.

  • Списки
  • Кнопки
  • Группы кнопок
  • Навигация
  • Пост- и пред- идущие элементы
Ссылка на основную публикацию