如何自定義由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？

回答

相關問題