Verwendung von Glyphicons in Bootstrap 3.0

Ich habe bereits Glyphicons in Bootstrap 2.3 verwendet, aber jetzt habe ich ein Upgrade auf Bootstrap 3.0 durchgeführt. Jetzt kann ich die Symboleigenschaft nicht verwenden.

In Bootstrap 2.3 funktioniert das folgende Tag

<i class="icon-search"></i>

In Bootstrap 3.0 funktioniert es nicht.

Die Symbole (Glyphen) sind jetzt in einer separaten CSS-Datei enthalten .

Das Markup wurde geändert in:

<i class="glyphicon glyphicon-search"></i>

oder

<span class="glyphicon glyphicon-search"></span>

Hier ist eine hilfreiche Liste der Änderungen für Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Los geht's:

<i class="glyphicon glyphicon-search"></i>

Mehr Informationen:

http://getbootstrap.com/components/#glyphicons

Übrigens. Sie können dieses Konvertierungstool verwenden . Dadurch wird auch der Code für die Symbole aktualisiert:

Wenn Sie eine angepasste Bootstrap 3-Distribution herunterladen möchten, müssen Sie:

1. Laden Sie die vollständige Distribution von https://github.com/twbs/bootstrap/archive/v3.0.0.zip herunter
2. Dekomprimieren Sie den gesamten aufgerufenen Ordner und laden Sie ihn fontsin Ihr Bootstrap-Verzeichnis hoch. Zusammen mit den anderen Ordnern "css, js".

Vorheriges Beispiel:

\css
\js
index.html

Beispiel nach dem Hochladen:

\css
\fonts
\js
index.html

Wenn Sie weniger verwenden und die Symbolschrift nicht geladen wird, müssen Sie den Schriftpfad überprüfen. Gehen Sie zur Datei variable.less und ändern Sie den für mich funktionierenden Pfad @ icon-font-path .

Bootstrap 3 erfordert ein Span-Tag, nicht i

<span class="glyphicon glyphicon-search"></span>`

Einschließen der Schriftarten Kopieren Sie alle Schriftdateien in ein Verzeichnis / fonts in der Nähe Ihres CSS.

1. CSS oder WENIGER einschließen Sie haben zwei Möglichkeiten, um die Schriftarten in Ihrem Projekt zu aktivieren: Vanille-CSS oder Quell-WENIGER. Fügen Sie für Vanilla-CSS einfach die kompilierte CSS-Datei aus / css in das Repository ein.
2. Kopieren Sie für WENIGER die .less- Dateien von / less in Ihr vorhandenes Bootstrap-Verzeichnis. Importieren Sie es dann über @import "bootstrap-glyphicons.less" in bootstrap.less . . Kompilieren Sie neu, wenn Sie bereit sind.
3. Fügen Sie einige Symbole hinzu! Nachdem Sie die Schriftarten und CSS hinzugefügt haben, können Sie die Symbole verwenden. Beispielsweise,<span class="glyphicon glyphicon-ok"></span>

Quelle

Wenn Sie zum Erstellen Ihrer Anwendung grunt verwenden, können sich die Pfade während des Erstellens ändern. In diesem Fall müssen Sie Ihre Grunzdatei wie folgt ändern:

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },

Laden Sie alle Dateien von Bootstrap herunter und fügen Sie diese CSS hinzu

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>

Dies könnte helfen. Es enthält viele Beispiele, die zum Verständnis hilfreich sein werden.

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp