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

Question

我想通过在Bootstrap的CSS中添加Font Awesome来替换Bootstrap默认的Glyphicons。如何定制由LESS生成的CSS以包含Font Awesome，而不会在更新核心Bootstrap文件时出现问题？注意：Font Awesome建议更改核心Bootstrap“bootstrap.less”文件，将@import "sprites.less";替换为@import "path/to/font-awesome/less/font-awesome.less";，但是这种更改将被覆盖，如果替换了Bootstrap核心（例如版本升级）。与我之前的问题（“如何使用LESSCSS变量自定义Twitter Bootstrap的CSS？”）类似，我们可以假设我拥有这个文件结构：

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

- Jeromy French

---

我没有发起悬赏 - @DourHighArch在我提问/回答10天后赞助了它（PS-谢谢DHA！） - Jeromy French

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";

- Jeromy French

---

为什么要在问题上设置悬赏并在2分钟后回复它？ - Patsy Issa

@PatsyIssa：我没有赞助这个赏金 - @DourHighArch在我提问/回答10天后赞助了它（PS-谢谢DHA！） - Jeromy French

@Patsy，我刚刚审核了几十个无用的编辑，Jeromy进行了一系列出色的编辑。这些点将推动他超越门槛，不再需要我的审核。此外，自己解决问题也是非常好的。 - Dour High Arch

@DourHighArch 无论如何，伙计，我只是好奇。 - Patsy Issa