Использование Font Awesome и Bootstrap 3

font-awesome

Казалось бы библиотека шрифтов-иконок Font Awesome была создана для работы с Bootstrap. Но есть пару тонких моментов, которые необходимо учитывать. 

1. При использовании bootstrap.css вы также подключаете в свою программу и код для шрифтов glyphicons.

Для того, чтобы этого избежать я рекомендую использовать расширенную сборку для Bootstrap. Она доступна на сайте фреймворка и вам необходимо лишь исключить компонент Glyphicons. Но самый лучший вариант — воспользоваться Less или Sass.

2. При использовании Font Awesome некоторые фреймворки могут «поломаться».

Это связано с тем, что некоторые плагины для Bootstrap используют CSS классы для его стандартных иконок. А именно «glyphicon» и «glyphicon-*». Если вы используете стандартную сборку font-awesome.css, то вы должны оперировать его классами «fa» и «fa-*».  При использовании Less или Sass эта проблема решается довольно просто. Вам необходимо лишь переопределить переменную @fa-css-prefix в своем font-awesome.less файле на ‘glyphicon’. Т.е. он должен выглядеть примерно так:

[codesyntax lang=»sas»]

@import "variables";
@fa-css-prefix: glyphicon;

@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "spinning";
@import "rotated-flipped";
@import "stacked";
@import "icons";

[/codesyntax]

Запись опубликована в рубрике HTML/CSS с метками , , , . Добавьте в закладки постоянную ссылку.

2 комментария: Использование Font Awesome и Bootstrap 3

  1. Трохи капітанства не завадить, але можливо знадобиться.
    А в чому проблема користуватись звичайним префіксом від FA?

  2. Могут возникнуть проблемы с плагинами Bootstrap, которые используют css классы типа «glyphicon» и «glyphicon-*». Но если использование таких плагинов не предвидится, то можно оставить и FA.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *