Font Awesome
Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн. Разработчик Дэйв Ганди собрал впечатляющую коллекцию из несколько сотен иконок подходящих под любые задачи.
Преимущества
- Все иконки векторные и масштабируются в самых широких пределах, без ухудшения их качества.
- Поскольку иконка представляет собой текстовый символ, то к нему применяются любые стилевые свойства, доступные для шрифтов — допустимо изменять цвет, фон, добавлять тень и т. д.
- Иконки хорошо работают во всех браузерах, включая старый IE8.
- Иконки прекрасно сочетаются с различными фреймворками вроде Bootstrap.
- Font Awesome включает не только шрифт, но и стилевой файл, в котором уже прописано несколько типовых решений, вроде размеров иконок, поворота, выравнивания, добавления рамки и др. Достаточно только подключить стиль и назначить элементу нужный класс.
- Иконки можно поворачивать, анимировать и комбинировать между собой, накладывая одну иконку поверх другой. Это ещё больше расширяет возможное количество вариантов.
- Шрифт свободен для коммерческого использования.
Недостатки
- Символы могут быть только одного цвета. Это ограничение частично обходится объединением иконок разного цвета друг с другом, а также с помощью эффектов CSS.
- Font Awesome как и большинство универсальных библиотек слишком избыточна, поэтому ради десятка используемых на сайте иконок придётся подключать несколько сотен. В этом случае помогает собственная сборка, когда вы включаете в шрифт только те иконки, которые вам действительно нужны.
- Установка
- Работа с иконками
- Работа с Bootstrap
- Сборка иконок
Bootstrap 3 — Иконки Font Awesome
Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте. Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег для краткости, но использование тега семантически более правильно).
fa-camera-retro
Создание иконок увеличенного размера
Для увеличения размера иконок Вы можете воспользоваться классами fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.
fa-lg fa-2x fa-3x fa-4x fa-5x
Создание иконок с фиксированной шириной
Иконки с фиксированной шириной очень полезны при создании навигационных меню или различных списков. Чтобы создать такие иконки, используйте класс fa-fw.
Главная Книги Статьи Параметры
Иконки для маркированных списков
С помощью классов fa-ul и fa-li Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.
Создание «вытянутых» иконок
Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.
. Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.
Создание вращающихся иконок
Для создания вращающейся иконки используйте класс fa-spin.
Создание повернутых и зеркально отраженных иконок
Чтобы повернуть и зеркально отразить иконки, используйте следующие классы fa-rotate-* и fa-flip-*.
иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали
иконка, отраженная по вертикали
Иконки, наложенные друг на друга
Чтобы наложить несколько иконок друг на друга, используйте класс «fa-stack» на родительском элементе, класс «fa-stack-1x» для иконки, который расположен на переднем плане и класс «fa-stack-2x» для иконки, расположенной на заднем плане. Класс «fa-inverse» может использоваться для инвертирования цвета иконки.
иконка "Twitter" на иконке "квадрата"
иконка "флага" на иконке "круга"
иконка "терминала" на иконке "квадрата"
иконка "запрещено" на иконке "камеры"
Font Awesome
Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.
Один шрифт, 675 иконок
Единой коллекцией Font Awesome является графическим языком интернет-пространства.
Нет необходимости в JavaScript
Мало проблем с совместимостью, так как для Font Awesome не требуется JavaScript.
Бесконечная масштабируемость
Масштабируемая векторная графика обозначает, что иконки будут выглядеть великолепно в любом размере.
Бесплатно, как воздух
Font Awesome полностью бесплатен для коммерческого использования. Читай про лицензию.
Управление через CSS
Легко настроить цвет иконок, размер, тени и все остальное, что возможно с помощью CSS.
Поддержка Retina-дисплеев
Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.
Совместимость с фреймворками
Изначально сделанный для Bootstrap, Font Awesome прекрасно работает и с другими фреймворками.
Совместимость с настольными компьютерами
Возможность использовать Font Awesome в любой программе как обычный шрифт, шпаргалка под весь набор иконок.
Доступность
Font Awesome любит экранные читалки и помогает сделать доступными ваши иконки в интернете.
Благодарности
Спасибо @robmadole и @supercodepoet за обзор дизайна иконок, советы, помощь по Jekyll, а также спасибо всем окружающим гавнюкам.
ОГРОМНОЕ спасибо @gtagliala за проделанную фантастическую работу над репозиторием Font Awesome в GitHub.
Спасибо MaxCDN за обеспечение превосходной доступности BootstrapCDN, самый быстрый и простой способ начать работать с Font Awesome.
Font Awesome
Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.
Один шрифт, 361 иконка
Единой коллекцией Font Awesome является графическим языком интернет-пространства.
Управление через CSS
Легко настроить цвет иконок, размер, тени и все остальное, что возможно с помощью CSS.
Бесконечная масштабируемость
Масштабируемая векторная графика обозначает, что иконки будут выглядеть великолепно в любом размере.
Бесплатно, как воздух
Font Awesome полностью бесплатен для коммерческого использования. Читай про лицензию.
Поддержка IE7
Font Awesome поддерживает IE7. Если Вам это потребовалось, то примите мои соболезнования.
Поддержка Retina-дисплеев
Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.
Создан под Bootstrap
Designed from scratch to be fully compatible with Bootstrap 2.3.2.
Desktop Friendly
To use on the desktop or for a complete set of vectors, check out the cheatsheet.
Screen Reader Compatible
Font Awesome won’t trip up screen readers, unlike other icon fonts.
Thanks To
Thanks to @robmadole and @supercodepoet for icon design review, advice, some Jekyll help, and being all around badass coders.
Thanks to @grantgordon and @johnsmclay for developing and hosting icnfnt, the best way to subset Font Awesome.
Thanks to MaxCDN for providing the excellent BootstrapCDN, the fastest and easiest way to get started with Font Awesome.
Font Awesome 3.2.1 ·
Created and Maintained by Dave Gandy
Font Awesome licensed under SIL OFL 1.1 ·
Code licensed under MIT License ·
Documentation licensed under CC BY 3.0