Wie ersetzen Glyphicons mit FontAwesome in der Bootstrap-3 ohne änderung der HTML-Seite?

Ich bin mit Bootstrap 3 in meinem Projekt, und ich bin mit FontAwesome Symbole Bibliothek statt gebündelt Glyphicons.

Das problem ist, dass ich einige Komponenten von Drittanbietern, die sich auf Glyphicons und ich will nicht zu ändern Sie Ihre HTML.

Ich bin auch font-awesome über Bower und SASS + Kompass (SCSS).

Ist es möglich, zu ersetzen Glyphicons mit FontAwesome ohne änderung der HTML-und der Anwendung einer anderen CSS-Klassen?

InformationsquelleAutor Slava Fomin II | 2014-10-29
  1. 19

    Können Sie verwenden Sie das folgende Verfahren, um eine überlastung Glyphicon CSS-Klassen mit FontAwesome diejenigen mit SCSS:

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

    Diese Lösung ist basierend auf code von Steven Clontz.

    Stellen Sie sicher, dass FontAwesome SCSS importiert werden, bevor diese überschrieben werden.

    Im obigen Beispiel, ich bin überlastung die folgenden zwei Glyphicons: chevron-Links und chevron-right mit den folgenden FontAwesome Symbole: Pfeil-Links und Pfeil-rechts respektvoll.

    Werden Sie brauchen, um eine überlastung alle icons, die in third-party-Komponenten zu erreichen, was Sie brauchen.

    Jedoch, betrachten dies als ein HACK und NICHT überlastet werden, ALLE Symbole, denn es wird Ihr CSS unnötig größer!

    Betrachten überreden, Ihre Drittanbieter zu implementieren, der Unterstützung für verschiedene icon-Bibliotheken. Dies wird eine richtige Lösung.

    • Ich Stimme mit dieser Antwort und getan haben, genau dieses Szenario Umschaltung von Font Awesome zu Icomoon. Ich würde allerdings hinzufügen, dass Glyphicon benötigen, zu langsam umgeschaltet, um die richtige FA-icons, so dass es nicht laden Sie beide sets.
    • Beim importieren von FontAwesome SCSS ich hab ein problem mit dem laden des eigentlichen Schriften, die ich hatte, um die schriftart-Pfad mit $fa-font-path: "/bower_components/font-awesome/fonts";, nicht sicher, ob es einen besseren Weg gibt, dies zu tun?
    • Ich denke, es ist eine richtige Art und Weise der Angabe von font-Pfad. Jedoch, ich setzen Sie nicht bower_components Verzeichnis direkt auf der web, ich setze nur bestimmte Dateien oder Verzeichnisse, die ich brauche. Es kann einfach erreicht werden mit symlinks unter Linux. Dies wird auch helfen, verringern Sie die Größe des zu bauen.
    • Guter Punkt @SlavaFominII, das war nur ein test-Projekt, dass ich war nicht vor Ort, so dass ich nicht gedacht habe, zu viel um Leistung, sondern das freilegen der gesamten bower_components Verzeichnis ist in der Tat eine schlechte Idee.
    InformationsquelleAutor Slava Fomin II
  2. 6

    Habe ich diesen Kern auf der Karte alle glyphicon-Symbole font-awesome.
    Ich würde schätzen, es hat um die 95% Genauigkeit und Abdeckung (glyphicon hat einige nutzlose Symbole, die font-awesome nicht).

    https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

    code removed in favor of gist

    Obwohl diese nicht mehr laden, alle icons, wenn Sie entfernen Sie alle glyphicon Symbole vom bootstrap bauen Sie tatsächlich spart ein paar bytes (schriftart awesome natürlich)

    • ` &.glyphicon-transfer { @extend .fa-exchange }` Eine Adresse.
    InformationsquelleAutor Blowsie
  3. 5

    In reinem CSS definieren glyphicon-Klasse mit gleichen Eigenschaften wie font-awesome-Klasse (.fa) und treffen Absprachen mit dem gewünschten Symbole :

    .glyphicon{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left:before{
    content:"\f053"
}
.glyphicon-chevron-right:before{
    content:"\f054"
}
    • Das vermeidet die 'transpiling von SCSS' Monstrosität. Gut gemacht
    • Ich bereits hatte dies in unsere codebase und es war nicht auftaucht, nicht mehr nach einem upgrade in font ehrfürchtig auf v5 kostenlos (es scheinbar sollte gearbeitet haben, denn die unicode-hatte sich nicht verändert, für jedes Symbol). Alle die ich tun musste, war add font-weight: 700 für es zu zeigen. .glyphicon:vor { font-weight: 700; }
    InformationsquelleAutor hugsbrugs
Schreibe einen Kommentar