Cara menggunakan glyphicons di bootstrap 3.0

86

Saya telah menggunakan glyphicons di bootstrap 2.3 tetapi sekarang saya telah mengupgrade ke bootstrap 3.0. Sekarang, saya tidak dapat menggunakan properti ikon.

Dalam bootstrap 2.3, tag di bawah ini berfungsi

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

Di bootstrap 3.0, itu tidak berfungsi.

html css twitter-bootstrap-3 Shivang Gupta
sumber
1
Hi semua, Saya telah melakukan hal yang sama dan menindaklanjuti struktur tetapi tidak mendapatkan glyphicon yang benar ... Gambar jenis 0101 yang tidak teridentifikasi ditampilkan sebagai ganti glyphicon
Shivang Gupta
Terima kasih, sebenarnya masalahnya adalah saya menggunakan file .less secara langsung tanpa mengubahnya menjadi css ... oops
Shivang Gupta
Untuk versi 3.0.0, ini rusak secara default. Mencoba beberapa solutions, tidak ada yang bekerja untuk saya.
Andrew_1510
Saya melihat masalah ini menggunakan file .less secara langsung menggunakan less.js. Tentu saja, dalam situasi itu, saya juga ingin melihatnya berhasil
Marc

Jawaban:

108

Ikon (glyphicons) sekarang terkandung dalam file css terpisah .. .

Markup telah berubah menjadi:

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

atau

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

Berikut adalah daftar perubahan yang berguna untuk Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Zim
sumber
5
Hi semua, Saya telah melakukan hal yang sama dan menindaklanjuti struktur tetapi tidak mendapatkan glyphicon yang benar ... Gambar jenis 0101 yang tidak teridentifikasi ditampilkan, bukan glyphicon
Shivang Gupta
Dapatkah Anda menunjukkan kode yang menyertakan CSS bootstrap dan glyphicons? Apakah Anda melihat kesalahan di konsol browser?
Zim
Pastikan Anda memasukkan glyphicons.css dengan benar. Seharusnya berfungsi dengan baik: bootply.com/61521
Zim
saya telah menambahkan ini dengan benar ... strukturnya adalah css / font / ...., css / less / ..., css / bootstrap.min.css dan dalam bootstrap.min.css saya telah menyertakan @import "less / bootstrap-glyphicons.less ";
Shivang Gupta
17
Tautan file css yang terpisah tampaknya rusak.
Trevi Awater
29

Ini dia:

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

Informasi lebih lanjut:

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

Btw. Anda dapat menggunakan alat konversi ini , ini juga akan memperbarui kode untuk ikon:

TheNiceGuy
sumber
1
Migrasi Bootply menghemat banyak waktu untuk mengubah kode ke TWB 3. Sangat berguna, @Michael / Buhake-Sindi.
Fernando Kosh
19

Jika Anda mendownload distro bootstrap 3 yang disesuaikan, Anda harus:

  1. Unduh distro lengkapnya dari https://github.com/twbs/bootstrap/archive/v3.0.0.zip
  2. Buka kompres dan unggah seluruh folder yang dipanggil fontske direktori bootstrap Anda. Gabungkan dengan folder lain "css, js".

Contoh Sebelumnya:

\css
\js
index.html

Contoh Setelah Mengunggah:

\css
\fonts
\js
index.html
Emiliano Díaz
sumber
Ini berfungsi dengan baik (Jan 2016). Terima kasih telah berbagi!
Devner
6

Jika Anda menggunakan lebih sedikit, dan itu tidak memuat font ikon Anda harus memeriksa jalur font pergi ke variabel file.less dan mengubah jalur @ icon-font- path, yang berhasil untuk saya.

alejandro
sumber
4

Bootstrap 3 membutuhkan tag span, bukan i

<span class="glyphicon glyphicon-search"></span>`
foreign4js
sumber
3

Sertakan font. Salin semua file font ke direktori / font di dekat CSS Anda.

  1. Sertakan CSS atau KURANG Anda memiliki dua opsi untuk mengaktifkan font di proyek Anda: vanilla CSS atau sumber LESS. Untuk vanilla CSS, cukup sertakan file CSS yang telah dikompilasi dari / css ke dalam repositori.
  2. Untuk LESS, salin file .less dari / less ke direktori Bootstrap yang ada. Kemudian impor ke bootstrap.less melalui @import "bootstrap-glyphicons.less"; . Kompilasi ulang jika sudah siap.
  3. Tambahkan beberapa ikon! Setelah Anda menambahkan font dan CSS, Anda dapat menggunakan ikon. Sebagai contoh,<span class="glyphicon glyphicon-ok"></span>

sumber

Mark Anthony Uy
sumber
1
Hi semua, Saya telah melakukan hal yang sama dan menindaklanjuti struktur tetapi tidak mendapatkan glyphicon yang benar ... Gambar jenis 0101 yang tidak teridentifikasi ditampilkan, bukan glyphicon
Shivang Gupta
3

Jika Anda menggunakan grunt untuk membangun aplikasi Anda, mungkin saja selama build jalurnya berubah. Dalam hal ini Anda perlu memodifikasi file grunt Anda seperti ini:

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
sumber
2

Unduh semua file dari bootstrap dan kemudian sertakan css ini 

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

Ini mungkin bisa membantu. Ini berisi banyak contoh yang akan berguna dalam pemahaman.

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

Mushu
sumber
Perhatikan bahwa jawaban link-only tidak disarankan, jawaban SO harus menjadi titik akhir dari pencarian solusi (vs. referensi lain yang berhenti, yang cenderung menjadi basi seiring waktu). Harap pertimbangkan untuk menambahkan sinopsis yang berdiri sendiri di sini, dengan menyimpan tautan sebagai referensi.
kleopatra