Font Awesome 4.5.0 - Иконочный шрифт и CSS-инструментарий

Ответить на тему
 

Пабло Эскобар ®

Стаж: 1 год 8 месяцев

Сообщений: 4

Симпатии: 2

Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.
Один шрифт, 605 иконок
Единой коллекцией Font Awesome является графическим языком интернет-пространства.
Нет необходимости в JavaScript
Мало проблем с совместимостью, так как для Font Awesome не требуется JavaScript.
Бесконечная масштабируемость
Масштабируемая векторная графика обозначает, что иконки будут выглядеть великолепно в любом размере.
Бесплатно, как воздух
Font Awesome полностью бесплатен для коммерческого использования. Читай про лицензию.
Управление через CSS
Легко настроить цвет иконок, размер, тени и все остальное, что возможно с помощью CSS.
Поддержка Retina-дисплеев
Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.
Совместимость с фреймворками
Изначально сделанный для Bootstrap, Font Awesome прекрасно работает и с другими фреймворками.
Совместимость с настольными компьютерами
Возможность использовать Font Awesome в любой программе как обычный шрифт, шпаргалка под весь набор иконок.
Совместимость с экранными дикторами
Font Awesome не сбивает с толку экранных дикторов, в отличии от других иконочных шрифтов.

Как настроить Font Awesome?

Настройка Font Awesome очень проста - это подключение двух строк кода в вашем вебсайте. Если вы профессионал, то можете персонализировать Font Awesome с помощью LESS. Font Awesome прекрасно работает с Bootstrap 3!
Быстро: BootstrapCDN от MaxCDN
Благодаря прекрасной команде MaxCDN, вы можете использовать Bootstrap CDN для подключения Font Awesome и это займет у вас всего лишь одну строчку кода. Кроме этого вам больше ничего не понадобится скачивать или устанавливать!
Вставьте нижеследующий код в тег
<head>
в 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 в папку вашего проекта.
В теге
<head>
вашего 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 'font-awesome-less'
Далее запустите:
$ bundle
Или установите в ручную:
$ 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 проект. Занимается поддержкой:
@supercodepoet.
Добавьте нижеуказанную строку в Gemfile вашего проекта:
gem 'font-awesome-sass'
Далее запустите:
$ bundle
Или установите в ручную:
$ 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.0Internet 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

Создавать темы 05-Апр-2016 15:25

[Профиль]  [ЛС] 
Показать сообщения:    
Ответить на тему

Текущее время: 14-Дек 13:23

Часовой пояс: UTC + 5



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы