Разное

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

18.11.2022

Содержание

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

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

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

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

или

Расширенная кастомизация Легко

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

Скачать

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

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

  1. Скопируйте полностью папку font-awesome в папку вашего проекта.
  2. В вашем проекте откройте файлы font-awesome/less/variables.
    less     или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.
    @fa-font-path:   "../font";

    Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.

  3. Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
  4. Посмотрите примеры для начала работы с Font Awesome!

или

Продвинутый уровень Профи

Sass Ruby Gem

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

  1. Добавьте нижеуказанную строку в Gemfile вашего проекта:
    gem 'font-awesome-sass'
  2. Далее запустите:
    $ bundle
  3. Или установите вручную:
    $ 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 5 доступен!

Font Awesome 5