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

86

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.

html css twitter-bootstrap-3

— Shivang Gupta
źródło

1

Cześć wszystkim, zrobiłem to samo i śledziłem strukturę, ale nie otrzymałem prawidłowego glifu ... Niezidentyfikowany obraz typu 0101 jest wyświetlany zamiast glifu

— Shivang Gupta

Dzięki, w rzeczywistości problem polegał na tym, że używałem pliku .less bezpośrednio bez konwertowania go do css ... Ups

— Shivang Gupta

W wersji 3.0.0, to łamie przez domyślne. Próbowałem kilka solutions, nikt dla mnie nie pracuje.

— Andrew_1510,

Widzę ten problem podczas używania pliku .less bezpośrednio przy użyciu less.js. Oczywiście w takiej sytuacji chciałbym też zobaczyć, jak to działa

— Marc

108

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

— Zim
źródło

5

Witam wszystkich, mam zrobić to samo i obserwowane struktury, ale nie dostaję poprawną glyphicon ... niezidentyfikowany 0101 typ obrazu jest pokazany zamiast glyphicon

— Shivang Gupta

Czy możesz pokazać swój kod zawierający bootstrap i glify CSS? Czy widzisz jakieś błędy w konsoli przeglądarki?

— Zim,

Upewnij się tylko, że poprawnie dołączasz plik glyphicons.css. Powinno działać dobrze: bootply.com/61521

— Zim

dodałem to poprawnie ... struktura to css / fonts / ...., css / less / ..., css / bootstrap.min.css, aw pliku bootstrap.min.css zawarłem @import "less / bootstrap-glyphicons.less ";

— Shivang Gupta

17

Wydaje się, że oddzielny link do pliku css jest uszkodzony.

— Trevi Awater

29

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:

— TheNiceGuy
źródło

1

Migracja Bootply pozwala zaoszczędzić dużo czasu przy konwersji kodu do TWB 3. Bardzo przydatne, @Michael / Buhake-Sindi.

— Fernando Kosh

19

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

Pobierz pełną dystrybucję z https://github.com/twbs/bootstrap/archive/v3.0.0.zip
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

— Emiliano Díaz
źródło

Działa to doskonale (styczeń 2016). Dzięki za udostępnienie!

— Devner

6

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.

— alejandro
źródło

4

Bootstrap 3 wymaga tagu span, a nie i

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

— stranger4js
źródło

3

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

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.
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.
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

— Mark Anthony Uy
źródło

1

Cześć wszystkim, zrobiłem to samo i śledziłem strukturę, ale nie otrzymałem poprawnego glifu ... Niezidentyfikowany obraz typu 0101 jest wyświetlany zamiast glifu

— Shivang Gupta

3

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

— Anke Wenz
źródło

2

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>

— Użytkownik_3535
źródło

0

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

— Mushu
źródło

Należy pamiętać, że odradza się udzielanie odpowiedzi zawierających tylko łącze , a odpowiedzi SO powinny być końcowym punktem poszukiwania rozwiązania (w porównaniu z kolejną przerwą w dostępie do odniesień, które z czasem stają się nieaktualne). Rozważ dodanie tutaj samodzielnego streszczenia, zachowując link jako odniesienie.

— kleopatra