Jak używać glifów w programie bootstrap 3.0

Używałem już glifów w bootstrap 2.3, ale teraz zaktualizowałem do bootstrap 3.0. Teraz nie mogę używać właściwości icon.

W bootstrap 2.3 poniżej działa tag

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

W bootstrap 3.0 to nie działa.

Ikony (glyphicons) są obecnie zawarte w osobnym pliku css .. .

Znacznik zmienił się na:

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

lub

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

Oto pomocna lista zmian dla Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Proszę bardzo:

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

Więcej informacji:

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

Przy okazji. możesz użyć tego narzędzia do konwersji , zaktualizuje ono również kod ikon:

Jeśli nie pobierasz niestandardowej dystrybucji bootstrap 3, musisz:

1. Pobierz pełną dystrybucję z https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Rozpakuj i prześlij cały folder o nazwie fontsdo katalogu bootstrap. Połącz razem z innymi folderami „css, js”.

Przykład przed:

\css
\js
index.html

Przykład po przesłaniu:

\css
\fonts
\js
index.html

Jeśli używasz less i nie ładuje czcionki ikon, musisz sprawdzić ścieżkę czcionki, przejdź do pliku variable.less i zmień @ icon-font-path path, to zadziałało.

Bootstrap 3 wymaga tagu span, a nie i

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

Dołącz czcionki Skopiuj wszystkie pliki czcionek do katalogu / fonts w pobliżu CSS.

1. Dołącz CSS lub LESS Masz dwie opcje włączania czcionek w swoim projekcie: zwykły CSS lub LESS źródłowy. W przypadku zwykłego CSS wystarczy dołączyć skompilowany plik CSS z katalogu / css do repozytorium.
2. W przypadku LESS skopiuj pliki .less z / less do istniejącego katalogu Bootstrap. Następnie zaimportuj go do pliku bootstrap.less przez @import "bootstrap-glyphicons.less"; . Skompiluj ponownie, gdy będziesz gotowy.
3. Dodaj kilka ikon! Po dodaniu czcionek i CSS możesz przejść do korzystania z ikon. Na przykład,<span class="glyphicon glyphicon-ok"></span>

źródło

Jeśli używasz gruntów do budowania aplikacji, możliwe, że podczas budowania zmieniają się ścieżki. W takim przypadku musisz zmodyfikować swój plik gruntowy w następujący sposób:

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
            }]
        }
    },

Pobierz wszystkie pliki z bootstrap, a następnie dołącz ten plik css

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

To może pomóc. Zawiera wiele przykładów, które będą przydatne w zrozumieniu.

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