Как настроить CSS, сгенерированный LESS, чтобы включить шрифт Awesome?

Я хочу настроить Bootstrap CSS путем размещения в Шрифт Awesome в качестве замены Бутстрап по умолчанию Glyphicons.

Как настроить CSS, сгенерированный LESS, чтобы включить Font Awesome таким образом, чтобы он не прерывался, если я обновляю основные файлы Bootstrap? Примечание: Font Awesome предлагает изменить исходный файл Bootstrap 'bootstrap.less', чтобы заменить @import "sprites.less"; на @import "path/to/font-awesome/less/font-awesome.less";, но это изменение будет перезаписано, если бы ядро ​​Boostrap было заменено (на например, обновление версии.)

Как и в предыдущем вопросе (Как настроить CSS Bootstrap Twitter с использованием переменных LESSCSS?"), мы можем предположить, что у меня есть эта файловая структура:

/html
    /bootstrap
       ...etc...
       /js
       /less
    /Font-Awesome
       /css
       /font
       /less
       ...etc...
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

Ответы

Ответ 1

Следуя шаблону, предложенному в Шрифт Awesome "начало работы" , отредактируйте файл MyApp/common_files/less/style.less на

  • импортируйте файл font-awesome/less/font-awesome.less, затем
  • определите LESS-переменную '@fa-font-path' (для шрифта Awesome 4+) или '@FontAwesomePath' (для шрифта Awesome < 4)

Итак, учитывая структуру каталогов в вопросе:

@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";
/* include the Font Awesome CSS */
@import "../../../Font-Awesome/less/font-awesome.less";

/* define path to Font Awesome 4 font folder*/
@fa-font-path:   "../../../Font-Awesome/fonts";

или

/* or define path to Font Awesome 3 font folder*/
@FontAwesomePath:   "../../../Font-Awesome/font";