沒有字形的Bootstrap 3替換爲Font Awesome

我想刪除Bootstrap 3 Glyphicons以支持Font Awesome。由於Font Awesome已經包含了大部分的Glyphicons，所以不希望包含它們並避免重複和兼容性問題。沒有字形的Bootstrap 3替換爲Font Awesome

當我進行自定義引導程序下載並取消選中glyphicon組件時，我仍然在css文件上看到一些glyphicon引用。 http://getbootstrap.com/customize/

如何完全禁用這些圖標？

感謝

來源

2014-02-26 denoise

在編譯CSS這6個剩餘Glyphicons引用關於在輪播組件的下+上一個按鈕可以選擇使用Glyphicons的。由於相關聲明也用於非Glyphicon next + prev按鈕，並且表示文件總大小的絕對微不足道的數量，所以我建議簡單地忽略它們。出於所有實際的目的，您已經從您的版本中刪除了Glyphicons。

如果您絕對必須剔除所述參考文件，然後compile Bootstrap manually，請事先從bootstrap/less/carousel.less中刪除違規行並從bootstrap/less/bootstrap.less中刪除@import "glyphicons.less";行。
或者您可以手動編輯Bootstrap Customizer已經爲您生成的CSS，因爲相關的刪除操作很簡單。

來源

2014-02-26 05:33:10 cvrebert

，因爲我用的引導與字體真棒，我去定製頁和我未選中的glyphicon組件像你一樣，但有一段時間我也我（覆蓋文件添加代碼此行）：

[class^="icon-"], 
[class*="icon-"] { 
    background: none; 
}

你也可以打開您下載的主引導文件（定製一個），然後搜索font-family: 'Glyphicons Halflings';，然後註釋所有@font-face。

希望這將幫助你

來源

2014-02-26 05:02:11

解決方案less（用於引導3.3.5測試）：

首先，覆蓋圖標旋轉木馬：

// Overloading "glyphicon" class with "fa". 
.glyphicon 
{ 

    &:extend(.fa); 

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left". 
    &.glyphicon-chevron-left 
    { 
     &:extend(.fa-chevron-left); 
    } 

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right". 
    &.glyphicon-chevron-right 
    { 
     &:extend(.fa-chevron-right); 
    } 
}

這部分是由Slava Fomin answer考慮的基礎上，史蒂芬Clontz的base code。

下一步：禁用glyphicons加載：

//** Load fonts from this directory. 
@icon-font-path:   "../fonts/"; 
//** File name for all font files. 
@icon-font-name:   "fontawesome-webfont"; 
//** Element ID within SVG icon file. 
@icon-font-svg-id:  "fontawesomeregular";

不要忘記lessc lazy loading：@icon-font-svg-id和其他增值經銷商將已設置的最新值。

來源

2016-04-27 19:29:35 maxkoryukov

在這裏你可以找到一個SCSS變體：http://stackoverflow.com/questions/26638215/how-to-replace-glyphicons-with-fontawesome-in-bootstrap-3-without-changing-html –

沒有字形的Bootstrap 3替換爲Font Awesome

回答

相關問題