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

Question

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

如何自定义 LESS 生成的 CSS 以在更新核心 Bootstrap 文件时不会中断的方式包含 Font Awesome？注意：Font Awesome 建议更改核心 Bootstrap 'bootstrap.less' 文件以替换@import "sprites.less";为@import "path/to/font-awesome/less/font-awesome.less";，但如果要替换 Boostrap 核心（例如，通过版本升级），此更改将被覆盖。

类似于我之前的问题（“如何使用 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";