Font Awesome

Font Awesome

Шрифтовые иконки совместимые с Twitter Bootstrap

   Скачать
Посмотреть на GitHub   ·   Версия   ·   Создан и Поддерживатеся Дейвом Ганди (Dave Gandy)

Установка Font Awesome так же проста как и добавление 2-х строк кода в Ваш проект, если же вы профи используйте LESS для компиляции! Font Awesome совместим и изначально предназначен для использования с Twitter Bootstrap!

Самый простой: BootstrapCDN

Добавьте Font Awesome + Bootstrap на Ваш сайт всего с помощью 2-х строчек кода. Вам не прийдется что-либо скачивать или устанавливать!

  1. Поместите следующий код внутри тега <head>. 
    1
2
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap//css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome//css/font-awesome.css" rel="stylesheet">
    Хотите использовать Font Awesome без Twitter Bootstrap? Просто уберите первую строчку кода из примера выше.
  2. Получите и распишитесь, Вы уже используете scalable-vector-icons-on-the-website judo solution добавив всего две строчки кода в свой проект.
  3. Ознакомьтесь с примерами использования перед началом работы с Font Awesome!

Простой: стандартный CSS

Используйте этот способ для работы со стандартным Font Awesome CSS совместно с Twitter Bootstrap CSS.

  1. Скопируйте папку font-awesome в Ваш проект.
  2. Внутрь тега <head>, добавьте путь к файлу font-awesome.min.css. 
    1
2
    <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Ознакомьтесь с примерами использования перед началом работы с Font Awesome!

PRO: Компиляция LESS

Используйте этот способ для создания собственной сборки Font Awesome и Twitter Bootstrap при помощи LESS.

  1. Скопируйте папку font-awesome в Ваш проект.
  2. Откройте bootstrap.less и замените @import "sprites.less"; на путь @import "path/to/font-awesome/less/font-awesome.less";
  3. Откройте font-awesome.less и измените переменную @FontAwesomePath на путь к Вашей папке со шрифтами. 
    1
    @FontAwesomePath:   "../font";

    Указывате путь к папке со шрифтами относительно папки с готовым CSS.

  4. Перекомпилируйте LESS при использовании статичного компилятора. В обратном случае - все уже готово к работе.
  5. Ознакомьтесь с примерами использования перед началом работы с Font Awesome!

Не используете Twitter Bootstrap?

Font Awesome так же работает и без использования Twitter Bootstrap.

  1. Скопируйте папку font-awesome в Ваш проект.
  2. Следуйте шагам описанным выше, пропуская пункты связанные с Titter Bootstrap.
  3. Откройте папку с файлом font-awesome.less или font-awesome.min.css и укажите путь к папке со шрифтами в нутри Вашего проекта (Питай выше).
  4. Ознакомьтесь с примерами использования перед началом работы с Font Awesome!

Вам нужна поддержка IE7?

Font Awesome работает в IE7. И... мои соболезнования, если Вам действительно важен этот пункт.

  1. Утановите Font Awesome и протестируйте его работу в современных браузерах.
  2. Добавьте font-awesome-ie7.min.css в Ваш проект.
  3. Добавьте в тег <head>, путь к font-awesome-ie7.min.css. 
    1
2
3
4
5
    <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
  4. Переубедите того, кто считает что поддержка IE7 нужна Вам или Вашему проекту.