Начало работы с Font Awesome

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

Для чего нужен ваш email?

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

Иконки для сайта. Быстро.

Вам не придется тратить время на файлы на вашем сервере. Вы получите все 675 иконки плюс наборы стилей - все оптимизировано для быстрой загрузки.

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Автоподдержка доступности

CDN Font Awesome поможет вам автоматизировать поддержку доступности ваших иконок для всех посетителей. Узнайте подробнее о лучших практиках доступности.

Асинхронная загрузка

Хотите ускорить загрузку вашего сайта? И мы тоже. Ваши иконки будут загружаться в фоновом режиме, что даст невероятную скорость вашему сайту.

или

Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.

Скачать

Использование CSS

Скопируйте полностью папку font-awesome в папку вашего проекта.
Вставьте нижеследующий код в тег <head> в HTML-код вашего вебсайта.
```
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
```
Посмотрите примеры для начала работы с Font Awesome!

Использование Sass или Less

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

Скопируйте полностью папку font-awesome в папку вашего проекта.
В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.
```
@fa-font-path:   "../font";
```
Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.
Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
Посмотрите примеры для начала работы с Font Awesome!

или

Less Ruby Gem

Используйте официальный Font Awesome LESS Ruby Gem для легкого внедрения Font Awesome LESS в Rails-проект. Занимается поддержкой:@supercodepoet.

Добавьте эту строку в Gemfile вашего приложения:
```
gem 'font-awesome-less'
```
Далее запустите:
```
$ bundle
```
Или установите в ручную:
```
$ gem install font-awesome-less
```

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less:

@import "font-awesome-sprockets";
@import "font-awesome";

Sass Ruby Gem

Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.

Добавьте нижеуказанную строку в Gemfile вашего проекта:
```
gem 'font-awesome-sass'
```
Далее запустите:
```
$ bundle
```
Или установите вручную:
```
$ gem install font-awesome-sass
```

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss:

@import "font-awesome-sprockets";
@import "font-awesome";

Валидаторы

Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.

На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.

Гайд по валидаторам от Bootstrap Team под лицензией CC BY 3.0

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before. Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку "обновить" или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. Подробности данной проблемы.

Гайд по использованию @font-face в Internet Explorer 8 от Bootstrap Team под лицензией CC BY 3.0

Необходима поддержка IE7 ?

Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .

Решение ошибок

Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на wiki -странице по частым ошибкам. Занимается поддержкой: @gtagliala.

Font Awesome CDN Супер легко