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

我想通过分层Font Awesome来替代Bootstrap's default Glyphicons来自定义Bootstrap的CSS。如何自定义由LESS生成的CSS以包含Font Awesome？

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

我刚才的问题类似（ “How can I customize Twitter Bootstrap's CSS using LESSCSS variables?”），我们可以假设我有这个文件的结构：

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

来源

2013-07-12 Jeromy French

我没有赞助商的奖金 - @ DourHighArch资助其10天之后我问/回答（PS - 谢谢DHA！） –

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

进口font-awesome/less/font-awesome.less文件，然后
定义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";

来源

2013-07-12 20:52:10

eum为什么用奖励提问并在2分钟后回复？ –

@PatsyIssa：我没有赞助奖金 - @ DourHighArch赞助了10天后我问/回答（PS - 谢谢DHA！） –

@Patsy，我刚刚回顾了几十个无用的编辑，而且Jeromy做了一系列的伟大的编辑。这些点将使他超过门槛，不需要我审查他的编辑。而且，回答自己的问题也很好。 –

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

回答

相关问题