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

Question

我希望通过在Bootstrap中分层来自定义Font Awesome的CSS，以替代Bootstrap's default Glyphicons。

我如何自定义LESS生成的CSS，以便在我更新核心Bootstrap文件时不会破坏Font Awesome？注意：Font Awesome suggests altering the core Bootstrap 'bootstrap.less' file要替换How can I customize Twitter Bootstrap's CSS using LESSCSS variables? 1}} @import "sprites.less";，但如果要替换Boostrap核心，则此更改将被覆盖（例如，通过版本升级）。

与我之前的问题（“{{3}}”）类似，我们可以假设我有这样的文件结构：

@import "path/to/font-awesome/less/font-awesome.less";

Answer 1

按照Font Awesome's "getting started" section中建议的模式，将MyApp/common_files/less/style.less文件编辑为

1. 导入font-awesome/less/font-awesome.less文件，然后
2. 定义LESS变量'@ fa-font-path'（对于Font Awesome 4+）或'@FontAwesomePath'（对于Font Awesome＆lt; 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";