Как настроить Font Awesome?
Настройка Font Awesome очень проста - это подключение двух строк кода в вашем вебсайте. Если вы профессионал, то можете персонализировать Font Awesome с помощью LESS. Font Awesome прекрасно работает с Bootstrap 3!
Быстро: BootstrapCDN от MaxCDN
Благодаря прекрасной команде MaxCDN, вы можете использовать Bootstrap CDN для подключения Font Awesome и это займет у вас всего лишь одну строчку кода. Кроме этого вам больше ничего не понадобится скачивать или устанавливать!
Вставьте нижеследующий код в тег
в HTML вашего вебсайта.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Когда появляется новая версия, то BootstrapCDN требуется некоторое время, чтобы обновить у себя версию font Awesome
Легко: Стандартный CSSИспользуйте данный метод, если вам нужен стандартный CSS Font Awesome.
Скопируйте полностью папку font-awesome в папку вашего проекта.
В теге
вашего html, укажите путь до font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Просто: LESS Ruby GemИспользуйте официальный Ruby гем Font Awesome LESS для легкого подключения Font Awesome LESS в ваш Rails проект. Занимается поддержкой: @supercodepoet.
Добавьте нижеуказанную строку в Gemfile вашего проекта:
Далее запустите:
Или установите в ручную:
$ gem install font-awesome-less
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less:
@import "font-awesome-sprockets";
@import "font-awesome";
Изящно: SASS Ruby GemИспользуйте официальный Ruby гем Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails или Compass проект. Занимается поддержкой:
Добавьте нижеуказанную строку в Gemfile вашего проекта:
Далее запустите:
Или установите в ручную:
$ gem install font-awesome-sass
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss:
@import "font-awesome-sprockets";
@import "font-awesome";
Профи: Персональный LESS или SASSИспользуйте данный метод, если вы хотите внести измененния в Font Awesome 4.5.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!
ВалидаторыДля того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS, которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.
На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.
Гайд по валидаторам от Bootstrap Team под лицензией CC BY 3.0
Internet Explorer 8 и @font-faceIE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before. Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку "обновить" или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. Подробности данной проблемы.
Гайд по использованию @font-face в Internet Explorer 8 от Bootstrap Team под лицензией CC BY 3.0
Необходима поддержка IE7?Если вам нужна поддержка IE7, то примите мои соболезнования. Ну правда. Font Awesome 4.5.0 не поддерживает IE7 и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7.
Решение ошибокЕсли у вас возникли проблемы в работе с Font Awesome, то можете
поискать решение на wiki-странице по частым ошибкам. Занимается поддержкой:
@gtagliala