Bootstrap 3 ohne Glyphicons ersetzt mit Font Awesome

Question

Ich möchte Bootstrap 3 Glyphicons zugunsten von Font Awesome entfernen. Da Font Awesome bereits die meisten Glyphicons enthält, möchte ich sie nicht einschließen und Duplikate und Kompatibilitätsprobleme vermeiden.

Wenn ich einen benutzerdefinierten Bootstrap-Download machen und ich die Glyphon-Komponente deaktivieren, sehe ich noch einige Glyphicon Referenzen auf der CSS-Datei. http://getbootstrap.com/customize/

Wie kann ich diese Symbole vollständig deaktivieren?

dank

Answer 1

Diese 6 verbleibenden Glyphicons Referenzen in der kompilierten CSS sind über die optionale Verwendung von Glyphicons für die nächsten + i.Vj. Schaltflächen in der Karussell-Komponente. Da die fraglichen Deklarationen auch für die Nicht-Glyphicons next + prev Buttons verwendet werden und eine absolut triviale Menge der gesamten Dateigröße darstellen, schlage ich vor, sie einfach zu ignorieren. Für alle praktischen Zwecke hast du bereits Glyphicons aus deinem Build eliminiert.

Wenn Sie unbedingt vernichten müssen die Referenzen, dann compile Bootstrap manually, vorher die beanstandeten Linien von bootstrap/less/carousel.less entfernen und die @import "glyphicons.less"; Linie von bootstrap/less/bootstrap.less entfernen.
Oder Sie können nur manuell das CSS bearbeiten, das der Bootstrap Customizer für Sie bereits generiert hat, da die relevanten Löschungen trivial sind.

Answer 2

Wie ich mit Font Super verwenden Bootstrap, gehe ich Seite anpassen und ich nicht markierte die glyphicon Komponente, wie Sie taten, aber seit einiger Zeit füge ich auch diese Zeilen Code an meiner (Override-Datei):

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

auch kann man die Haupt Bootstrap-Datei öffnen, die Sie für font-family: 'Glyphicons Halflings'; heruntergeladen (customized one) und suchen, dann kommentieren Sie die @font-face alle.

Hope this helfen Ihnen

Answer 3

Lösung für less (getestet für Bootstrap 3.3.5):

Zuerst außer Kraft setzen Symbole für Karussell:

// 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); 
    } 
} 

Dieser Teil von Slava Fomin answer genommen wird, basiert auf Steven Clontz des base code.

Nächster Schritt: disable glyphicons Laden:

//** 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"; 

nicht Vergessen lessc lazy loading: @icon-font-svg-id und andere Vars werden den neuesten Wert haben Sie festgelegt haben.