Один шрифт, 249 иконок
Все в одном файле, Font Awesome - это язык иконок для Ваших web-проектов.Управление через CSS
Изменяйте цвет, размер, тень, и все что возможно изменить через CSS.Бесконечная масштабируемость
Масштабируемая векторная графика позволяет делать иконки любого размера без потери в качестве.На халяву!
Font Awesome абсолютно бесплатный продукт, даже для коммерческого использования. Узнайте больше о лицензии.Работает в IE7
Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.Отлично подходит для Retina дисплеев
Иконки в Font Awesome - векторные, что само собой означает превосходное отображение на дисплеях высокого разрешения.Сделан для Twitter Bootstrap
Создан совместно и для использования с Twitter Bootstrap.Дизайнеры оценят
Установите FontAwesome.otf и посетите страницу копи-паст. Удачи с дизайном.Поддерживается читалками
Font Awesome - в отличие от других шрифтовых иконок поддерживается на дисплеях из цифровой бумаги.Что нового в Font Awesome 3.0
Каждый пиксель на месте
Каждая иконка индивидуально перерисована для совместимости со стандартным размером шрифта в Bootstrap'е в 14px.Собери свой
Спасибо @grantgordon и @johnsmclay, благодаря этим ребятам Вы можете самостоятельно собрать свой комплект из иконок, которые нужны только Вашему проекту.Наша лицензия лучше
SIL open font license для дизайна, MIT license для кодинга. Ссылка на проект больше не обязательна, НО приветствуется.40 новых иконок, в новой версии 3.0
Мы сделали все что было запрошено со стороны нашего сообщества Font Awesome GitHub.Новые стили
Новые стили для анимации, новые классы 2x-4x для увеличения иконок, границы вокруг иконок, и другие вкусности.Уменьшен размер на 28%
Версия 3.0 весит меньше, несмотря на прирост в 16% в количестве иконок. И супер-маленький размер при самостоятельной сборке.Новые иконки 3.0
Вы просили, - мы сделали. Font Awesome поставляется с 40 новыми иконками. Вам нужно что-то еще? Запросите новые иконки на странице сообщества. Все будут рады если Вы добавите свои собственные иконки.
Web-приложение
Редактор текста
Указатели
Видео плеер
Медицинские Хотите повлиять на здравоохранение? Присоединяйтесь ко мне - Kyruus.
Интеграция
Интегрировать Font Awesome очень просто в Twitter Bootstrap, а так же использовать отдельно на ваше усмотрение.
Bootstrap + Font Awesome
Используйте Font Awesome с Bootstrap CSS.
- Скопируйте папку со шрифтами Font Awesome в Ваш проект.
- Затем скопируйте font-awesome.min.css в Ваш проект.
-
Откройте файл font-awesome.min.css и отредактируйте путь к файлам со шрифтами, если это необходимо.
Папка со шрифтами находится относительно (выше) директории с CSS-файлами.
-
Внутри тега
<head>Вашей html-страницы, поместите ссылку на font-awesome.min.css.<link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/font-awesome.min.css">
- Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!
Кастомная интеграция Bootstrap + Font Awesome с использованием LESS
Используйте этот метод для интеграции Font Awesome в Twitter Bootstrap используя LESS.
- Скопируйте папку со шрифтами Font Awesome в Ваш проект.
- Затем скопируйте font-awesome.less в директорию bootstrap/less.
- Откройте bootstrap.less и замените
@import "sprites.less";на@import "font-awesome.less"; -
Откройте файл font-awesome.less и отредактируйте переменную
@FontAwesomePathтак что бы она указывала на директорию со шрифтами.@FontAwesomePath: "../font";
Папка со шрифтами находится относительно (выше) директории с скомпилированными CSS-файлами.
- Перекомпилируйте Ваш LESS в случае использования статичного компилятора. В другом случае все готово к работе.
- Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!
Кастомная интеграция Bootstrap + Font Awesome Integration используя SASS или SCSS
Никогда не пробовал использовать это в живом проекте, так что дайте знать, если найдете ошибки в SCSS или SASS файлах.
Не используете Bootstrap?
Font Awesome - работает и без использования Twitter Bootstrap.
- Скопируйте папку со шрифтами Font Awesome в Ваш проект.
- Затем скопируйте font-awesome.less или font-awesome.min.css в папку Вашего проекта.
- Откройте font-awesome.less либо font-awesome.min.css и отредактируйте пути к шрифтам (см. пример выше).
- Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!
Требуется поддержка IE7?
Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.
- Добавьте файл font-awesome-ie7.min.css в папку Вашего проекта.
-
В теге
<head>Вашей html страницы, добавьте ссылку на font-awesome-ie7.min.css.<link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> <!--[if IE 7]> <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> <![endif]-->
- Теперь можно звонить тем кто требовал поддержку в IE7.
Примеры
Много-много примеров в стиле Twitter Bootstrap.
Используйте наши иконки в:
- Списки (как этот)
- Кнопки
- Группы кнопок
- Навигация
- Пред- и пост- идущие элементы в input
- И много другого в вашем CSS
Новые стили в 3.0
Примеры в HTML
Строчные иконки
Поместите тег <i> иконки Font Awesome рядом с любым элементом или в тексте.
<i class="icon-camera-retro"></i> icon-camera-retro
Большие иконки
Для увеличения иконки до размеров родительского элемента, используйте классы icon-large, icon-2x,
icon-3x или icon-4x.
Увеличьте размер иконки используя класс icon-large (33% увеличение), icon-2x,
icon-3x либо icon-4x.
icon-camera-retro
icon-camera-retro
icon-camera-retro
icon-camera-retro
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Анимирование
Используйте класс icon-spin - и Ваша иконка будет крутится. Рекомендуем использовать с icon-spinner и
icon-refresh.
<i class="icon-spinner icon-spin"></i> Кручусь-верчусь - контент гружусь...
CSS3-анимация не работает в IE7 - IE9.
Границы & Впуклые иконки
Используйте классы icon-border и pull-right, либо pull-left для цитат и заглавных иконок в тексте.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i> Используйте множество классов в одном элементе ... создания своего уникального стиля.
<i class="icon-flag icon-4x pull-left icon-border"></i> Используйте множество классов в одном элементе ... создания своего уникального стиля.
Кнопки
Иконки Font Awesome отлично подходят для использования с кнопками. Вы так же можете использовать большие иконки и кнопки, и классы:
pull-right, pull-left, icon-spin.
<a class="btn" href="#"> <i class="icon-repeat"></i> Перезагрузить</a> <a class="btn btn-success" href="#"> <i class="icon-shopping-cart icon-large"></i> Checkout</a> <a class="btn btn-large btn-primary" href="#"> <i class="icon-comment"></i> Комментировать</a> <a class="btn btn-small btn-info" href="#"> <i class="icon-info-sign"></i> Info</a> <a class="btn btn-danger" href="#"> <i class="icon-trash icon-large"></i> Удалить</a> <a class="btn btn-small" href="#"> <i class="icon-cog"></i> Настройки</a> <a class="btn btn-large btn-danger" href="#"> <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a> <a class="btn btn-primary" href="#"> <i class="icon-refresh icon-spin"></i> Синхронизация...</a>
Группы кнопок
<div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div>
Выпадающие списки и кнопки
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="icon-user"></i> Профиль</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
<li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Забанить</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Сделать админом</a></li>
</ul>
</div>
Списки
- Списки
- Кнопки
- Группы кнопок
- Навигация
- Пост- и пред- идущие элементы
Замените знак списка своим собственным.
<ul class="icons"> <li><i class="icon-ok"></i> Списки</li> <li><i class="icon-ok"></i> Кнопки</li> <li><i class="icon-ok"></i> Группы кнопок</li> <li><i class="icon-ok"></i> Навигация</li> <li><i class="icon-ok"></i> Пост- и пред- идущие элементы</li> </ul>
Навигация
Используйте иконки в навигации для визуализации пунктов меню.
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home"></i> На главную</a></li> <li><a href="#"><i class="icon-book"></i> Библиотека</a></li> <li><a href="#"><i class="icon-pencil"></i> Приложения</a></li> <li><a href="#"><i class="icon-cogs"></i> Настройки</a></li> </ul>
Пост- и пред- идущие элементы
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" type="text" placeholder="Email">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i></span>
<input class="span2" type="password" placeholder="Пароль">
</div>
</form>
Кастомный CSS
Все что возможно сделать при помощи CSS, можно применить к Font Awesome.
Звёздный рейтинг (Вдохновение от CSS Tricks)
Сотрудничество и помощь Font Awesome
Хотите помочь нам создавать иконки? Вы можете создать свои иконки и мы их добавим - присоединяйтесь к нашему сообществу на GitHub.
Как добавить новые иконки?
- Скачайте icon-flag.pdf шаблон.
- Откройте PDF в Adobe Illustrator. Имейте в виду файл имеет размер 60x56. Это в 4x кратный размер, от стандартного, шириной в 15 и высотой в 14. Шаблон это пример иконки "flag" используйте его как заготовку.
- Нарисуйте иконку, убедитесь что она идеальна. Как минимум каждая линия в Вашей заготовке должна быть не менее 4px. Не делите иконку и пиксели ровно по середине, они будут смазаны во время рендирования. Выставьте зум на 25% для представления как иконка будет выглядеть после рендирования.
-
Отправьте свою иконку. Скидывайте на мыло Дейву dave@davegandy.com. Убедитесь что тема письма соответствует следующему шаблону:
[Font Awesome] [Icon Contribution] icon-name, не забудьте прикрепить совой pdf-файл с иконкой. Если Ваша иконка будет добавлена в Font Awesome (Дейв слишком перфекционист и применяет большие требования к каждой иконке), - Дейв свяжется с Вами для уточнения контактной информации, которая будет добавлена в информацию о создателях шрифта.
Roadmap
Ниже план на будущее.
- Облегчение самостоятельной сборки шрифта.
- Больше иконок. Есть идеи? Добавьте запрос на иконку в проект Font Awesome на GitHub.
- Пособие по CSS методам, в духе "Звездного рейтинга" (см. выше).
Лицензия
- Font Awesome распространяются по лицензии SIL Open Font License - http://scripts.sil.org/OFL.
- Файлы Font Awesome CSS, LESS, и SASS распространяются по лицензии MIT License - https://opensource.org/licenses/mit-license.html.
- Пиктограммы Font Awesome распростроняются по лицензии CC BY 3.0 License - https://creativecommons.org/licenses/by/3.0/
- Ссылка на первоисточник Font Awesome 3.0 более не обязательна, НО приветствуется:
Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome.
Kyruus
Я (Dave Gandy) ведущий дизайнер в Kyruus. Я (Dave Gandy) просыпаюсь каждый день вдохновленный своей работой. Почему? Kyruus - изменит систему здравоохранения. Без преувеличений.
Kyruus это хорошо финансируемый, стартап направленный на улучшение здравоохранения в Бостоне (Boston). Мы верим в то что правильная информация доставленная в правильное время (быстро) поможет врачам делать правильные решения. Мы верим что можем сохранить людям жизнь.
Что мы любим в Kyruus:- Дизайн. В любой сфере работы компании дизайн стоит на первом месте. Он безупречен.
- Цель. Каждый день, каждый день я (Dave) просыпаюсь что бы сделать этот мир лучше.
- Люди. Я работаю с лучшими людьми. Которые больше чем умные люди. Хорошие люди.
В Kyruus требуются хорошие люди. Дизайнеры, разработчики приложений, мастера по работе с большими данными, & интерны. Присоединяйтесь и работайте со мной.
Заинтересованы? Напишите Дейву.Благодарности
Надеюсь Вы думаете что Font Awesome - аху**ый. Я потратил сотни часов работая над этим шрифтом, создав опен-сорс сообщество и работая совместно с людьми. .
Чем помочь?
Распространяйте иконки для того что бы Font Awesome стал более популярным.
Помогите Дейву купить iMac
Пожертвования В качестве благодарности Дейву за предоставленный шрифт, Дейв мечтает о новом алюминиевом и серебристом iMac для того что бы он мог продолжать творить.
Лист желаний Дейва на Amazon
Выберите что-то конкретное из листа желаний Дейва в качестве благодарности.