Шрифтовые иконки для
использования с Twitter Bootstrap
Вы просили, - мы сделали. Font Awesome поставляется с 40 новыми иконками. Вам нужно что-то еще? Запросите новые иконки на странице сообщества. Все будут рады если Вы добавите свои собственные иконки.
Интегрировать Font Awesome очень просто в Twitter Bootstrap, а так же использовать отдельно на ваше усмотрение.
Используйте Font Awesome с Bootstrap 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 в Twitter Bootstrap используя LESS.
@import "sprites.less";
на @import "font-awesome.less";
@FontAwesomePath
так что бы она указывала на директорию со шрифтами.
@FontAwesomePath: "../font";
Папка со шрифтами находится относительно (выше) директории с скомпилированными CSS-файлами.
Никогда не пробовал использовать это в живом проекте, так что дайте знать, если найдете ошибки в SCSS или SASS файлах.
Font Awesome - работает и без использования Twitter Bootstrap.
Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.
<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]-->
Много-много примеров в стиле Twitter Bootstrap.
Используйте наши иконки в:
Поместите тег <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, можно применить к Font Awesome.
Звёздный рейтинг (Вдохновение от CSS Tricks)
Хотите помочь нам создавать иконки? Вы можете создать свои иконки и мы их добавим - присоединяйтесь к нашему сообществу на GitHub.
[Font Awesome] [Icon Contribution] icon-name
, не забудьте прикрепить совой pdf-файл с иконкой. Если Ваша иконка будет добавлена в Font Awesome (Дейв слишком перфекционист и применяет большие требования к каждой иконке), - Дейв свяжется с Вами для уточнения контактной информации, которая будет добавлена в информацию о создателях шрифта.
Ниже план на будущее.
Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome
.Я (Dave Gandy) ведущий дизайнер в Kyruus. Я (Dave Gandy) просыпаюсь каждый день вдохновленный своей работой. Почему? Kyruus - изменит систему здравоохранения. Без преувеличений.
Kyruus это хорошо финансируемый, стартап направленный на улучшение здравоохранения в Бостоне (Boston). Мы верим в то что правильная информация доставленная в правильное время (быстро) поможет врачам делать правильные решения. Мы верим что можем сохранить людям жизнь.
Что мы любим в Kyruus:В Kyruus требуются хорошие люди. Дизайнеры, разработчики приложений, мастера по работе с большими данными, & интерны. Присоединяйтесь и работайте со мной.
Заинтересованы? Напишите Дейву.Надеюсь Вы думаете что Font Awesome - аху**ый. Я потратил сотни часов работая над этим шрифтом, создав опен-сорс сообщество и работая совместно с людьми. .
Распространяйте иконки для того что бы Font Awesome стал более популярным.
Пожертвования В качестве благодарности Дейву за предоставленный шрифт, Дейв мечтает о новом алюминиевом и серебристом iMac для того что бы он мог продолжать творить.
Выберите что-то конкретное из листа желаний Дейва в качестве благодарности.