如何自定义LESS生成的CSS以包含Font Awesome？

Question

我想通过在Font Awesome中分层来自定义Bootstrap的CSS,以替代Bootstrap的默认Glyphicons.

如何更新核心Bootstrap文件,如何自定义LESS生成的CSS以包含Font Awesome的方式不会破坏？注:字体真棒建议改变核心引导"bootstrap.less"文件来代替@import "sprites.less";用@import "path/to/font-awesome/less/font-awesome.less";,但这种改变会被覆盖,如果自举核心是要被替换(通过版本升级,例如).

类似于我之前的问题(" 如何使用LESSCSS变量自定义Twitter Bootstrap的CSS？ "),我们可以假设我有这样的文件结构:

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

Answer 1

按照Font Awesome的"入门"部分中建议的模式,将MyApp/common_files/less/style.less文件编辑为

1. font-awesome/less/font-awesome.less然后导入文件
2. 定义LESS变量'@ fa-font-path'(对于Font Awesome 4+)或'@FontAwesomePath'(对于Font 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's font folder*/
@fa-font-path:   "../../../Font-Awesome/fonts";

要么

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