Bootstrap 3 Glyphicons tidak berfungsi

Saya mengunduh bootstrap 3.0 dan tidak dapat mengaktifkan glyphicons. Saya mendapatkan semacam kesalahan "E003". Adakah ide mengapa ini terjadi? Saya mencoba secara lokal dan online dan saya masih mendapatkan masalah yang sama.

Saya mengalami masalah yang sama dan tidak dapat menemukan informasi tentang hal itu kecuali dalam komentar tersembunyi di halaman ini. File font saya memuat dengan baik menurut Chrome, tetapi ikon tidak ditampilkan dengan benar. Saya membuat jawaban ini jadi semoga akan membantu orang lain.

Ada yang salah dengan file font yang saya unduh dari alat kustomisasi Bootstrap 3. Untuk mendapatkan font yang benar, buka beranda Bootstrap dan unduh file .zip lengkap. Ekstrak keempat file font dari sana ke direktori font Anda dan semuanya akan berfungsi.

Catatan untuk pembaca: pastikan untuk membaca komentar @ user2261073 dan jawaban @ Jeff tentang bug di penyesuai. Kemungkinan penyebab masalah Anda.

File font tidak dimuat dengan benar. Periksa apakah file berada di lokasi yang diharapkan.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Seperti yang ditunjukkan oleh Daniel, itu mungkin juga merupakan masalah mimetype. Alat dev Chrome menampilkan font yang diunduh di tab jaringan:

Dalam kasus saya, saya mendapatkan 404 untuk glyphicons-halflings-regular.woff , dan glyphicons yang tidak terlihat di browser seluler.

Sepertinya ada beberapa kebingungan tentang tipe MIME untuk woff, lebih dari satu tipe MIME diterima oleh browser yang berbeda, tetapi W3C mengatakan :

application/font-woff

Sunting: Setelah menguji jenis MIME berikut untuk woff berfungsi pada semua browser saat ini:

application/x-font-woff

Sunting: Versi terbaru Bootstrap saat ini (3.3.5) menggunakan font .woff2 dengan hasil awal yang sama dengan .woff, W3C masih mendefinisikan spesifikasi tetapi pada saat ini jenis MIME tampaknya adalah:

application/font-woff2

-Jika Anda mengikuti jawaban dengan nilai tertinggi dan masih tidak berfungsi :

The Fontfolder HARUS berada di tingkat yang sama seperti folder CSS Anda. Memperbaiki jalur bootstrap.css tidak akan berfungsi.

Bootstrap.cssharus menavigasi ke Fontsfolder persis seperti ini:

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Jika solusi lain tidak berfungsi, Anda mungkin ingin mencoba mengimpor Glyphicons dari sumber eksternal, daripada mengandalkan Bootstrap untuk melakukan segalanya untuk Anda. Untuk melakukan ini:

Anda dapat melakukan ini dalam HTML:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Atau CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

Kredit untuk edsiofi dari utas ini: Bootstrap 3 Glyphicons CDN

Jika seseorang berakhir di sini dan menggunakan Bootstrap> = v4.0: dukungan glyphicon dijatuhkan

Bagian yang relevan dari catatan rilis:

Menjatuhkan font ikon Glyphicons. Jika Anda membutuhkan ikon, beberapa opsi adalah:

versi hulu Glyphicons

Oktikon

Font yang mengagumkan

Sumber: https://v4-alpha.getbootstrap.com/migration/#components

Jika Anda ingin menggunakan glyphicons, Anda perlu mengunduhnya secara terpisah.

Saya pribadi mencoba Font Awesome dan itu cukup bagus. Menambahkan ikon mirip dengan cara glypicon:

<i class="fas fa-chess"></i>

Saya sedang melihat pertanyaan lama saya ini dan karena apa yang seharusnya menjadi jawaban yang benar sampai sekarang, diberikan oleh saya di komentar, saya pikir saya juga pantas mendapatkan penghargaan untuk itu.

Masalahnya terletak pada fakta bahwa file font glyphicon yang diunduh dari alat kustomisasi bootstrap tidak sama dengan yang diunduh dari pengalihan yang ditemukan di beranda bootstrap. Yang berfungsi sebagaimana mestinya adalah yang dapat diunduh dari tautan berikut:

http://getbootstrap.com/getting-started/#download

Siapa pun yang memiliki masalah dengan file penyesuai buruk yang lama harus menimpa fonta dari tautan di atas.

Situs Web Azure tidak ada dalam konfigurasi MIME. Anda harus menambahkan entri berikut ke web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Seperti yang dijelaskan @Stijn, lokasi default di Bootstrap.csssalah ketika menginstal paket ini Nuget.

Ubah bagian ini menjadi seperti ini:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Anda dapat menambahkan baris kode ini dan selesai.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Terima kasih.

IIS tidak akan mem-server .wofffile secara default, jadi di IIS Anda harus menambahkan <mimeMap>entri ke web.configfile Anda ;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Apakah Anda memiliki semua file di bawah ini di direktori font Anda

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Saya memodifikasi variabel saya yang lebih sedikit. Tanpa file, saya memodifikasi variabel

@icon-font-path:          "fonts/";    

aslinya adalah

@icon-font-path:          "../fonts/"; 

Itu menyebabkan masalah

Ini disebabkan oleh salah coding pada bootstrap.css dan bootstrap.min.css. Ketika Anda mengunduh Bootstrap 3.0 dari Customizer, kode berikut tidak ada:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Karena ini adalah kode utama untuk menggunakan Glyphicons, itu tidak akan berfungsi ...

Unduh file css dari paket lengkap dan kode ini akan diterapkan.

Inilah alasannya, mengapa ikon tidak muncul untuk saya:

* {
    arial, sans-serif !important;
}

Setelah saya menghapus bagian saya ini CSS, semuanya berjalan seperti seharusnya. Yang penting adalah yang menyebabkan masalah.

Masalah / solusi lain mungkin memiliki kode Bootstrap 2.x ini:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

dan ketika bermigrasi berdasarkan panduan ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

Anda lupa menambahkan kelas ikon (berisi referensi font):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Di bawah ini adalah apa yang diperbaiki untuk saya. Saya mendapatkan kesalahan "URI buruk" menggunakan Firebug console. Ikon ditampilkan sebagai angka E ###. Saya harus menambahkan file .htaccess di direktori 'fonts' saya. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Kemungkinan duplikat: Font yang dapat diunduh di firefox: URI buruk atau akses lintas situs tidak diizinkan

Ini adalah pemotretan yang sangat panjang, tetapi ini adalah kasus saya dan karena itu belum ada di sini.

Jika Anda mengkompilasi Bootstrap Twitter dari SASS menggunakan gulp-sassatau grunt-sassmis. node-sass. Pastikan modul simpul Anda mutakhir, terutama jika Anda mengerjakan proyek yang agak lama.

Ternyata pada beberapa waktu ke belakang arahan SASS @at-rootdigunakan dalam definisi @font-facedalam glyphicons, lihat https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/suplys.scly .

Gotcha di sini adalah node-sassie. libsassjangan mendukung @at-rootarahan jika terlalu lama. Jika demikian, Anda akan @font-facedibungkus di @at-rootmana browser tidak tahu apa yang harus dilakukan. Hasil dari ini adalah bahwa tidak ada font yang akan diunduh dan Anda mungkin akan melihat sampah, bukan ikon.

Catatan: di bawah ini kemungkinan adalah skenario ceruk, tetapi saya ingin membaginya jika ada orang lain yang menganggapnya berguna.

Dalam proyek rel, kami menggunakan kembali sedikit melalui permata yang menggunakan mesin Rails bootstrap-sass. Semua baik-baik saja di proyek utama dengan pengecualian resolusi jalur font glyphicon.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Kami menemukan $bootstrap-sass-asset-helperitufalse selama resolusi ketika kami berharap itu benar, jadi jalannya berbeda.

Kami menyebabkan $bootstrap-sass-asset-helperdiinisialisasi dalam permata mesin dengan melakukan:

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

misalnya ini menyebabkan jalan untuk diselesaikan:

/assets/bootstrap/glyphicons-halflings-regular.woff

Sekali lagi, ini seharusnya tidak diperlukan dalam proyek kereta api normal yang menggunakan bootstrap-sass, kami kebetulan menggunakan kembali banyak pandangan dan ini berhasil bagi kami. Semoga ini bisa membantu orang lain.

Inilah yang dikatakan dokumentasi resmi tentang font yang tidak di-render.

Mengubah lokasi font ikon Bootstrap mengasumsikan file font ikon akan terletak di direktori ../fonts/, relatif terhadap file CSS yang dikompilasi. Memindahkan atau mengganti nama file font tersebut berarti memperbarui CSS dengan salah satu dari tiga cara berikut ini: Mengubah variabel @ icon-font-path dan / atau @ icon-font-name dalam sumber, Less files. Memanfaatkan opsi URL relatif yang disediakan oleh kompiler Kurang. Ubah jalur url () di CSS yang dikompilasi. Gunakan opsi apa pun yang paling sesuai dengan pengaturan pengembangan spesifik Anda.

Selain itu bisa jadi Anda melewatkan menyalin folder font ke direktori root

Saya punya masalah ini dan itu disebabkan oleh file variable.less. Meng-override-nya untuk mengatur nilai icon-font-path menyelesaikan masalah.

Struktur file terlihat seperti ini:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Menambahkan file variable.less saya sendiri di root Konten dan referensi ini di styles.less menyelesaikan kesalahan 404.

Variables.less berisi:

@icon-font-path:          "fonts/";

Saya mendapat Bootstrap dari NuGet. Ketika saya menerbitkan situs saya mesin terbang tidak berfungsi.

Dalam kasus saya, saya membuatnya berfungsi dengan mengatur Build Action untuk masing-masing file font ke 'Konten' dan mengaturnya ke 'Salin Selalu'.

saya punya kode lebar kotak \ e094 untuk glyphicon-panah-down, sebenarnya saya memecahkan masalah menambahkan glyphicon di kelas css seperti itu:

<i class="glyphicon  glyphicon-arrow-down"></i>

jika itu bisa membantu seseorang ...

Pastikan Anda tidak terlalu menentukan keluarga font, misalnya

*{font-family: Verdana;}

akan menghapus font setengah-setengah dari elemen i.

Saya mengalami masalah yang sama ketika browser tidak dapat menemukan file font, dan masalah saya adalah karena pengecualian dalam file .htaccess saya yang merupakan file daftar putih yang tidak boleh dikirim ke index.phpuntuk diproses. Karena file font tidak dapat dimuat karakter diganti dengan BLOB.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Seperti yang Anda lihat, file seperti gambar, rss, dan xml dikecualikan dari penulisan ulang, tetapi file font .woffdan .woff2file, jadi ini juga perlu ditambahkan ke daftar putih.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Menambahkan woffdan woff2ke daftar putih memungkinkan file font untuk dimuat, dan glyphicons kemudian akan ditampilkan dengan benar.

Anda harus mengatur dengan perintah ini:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

Apa yang berhasil bagi saya adalah mengganti rute dari:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

untuk

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Ini adalah bagaimana Anda memasukkan ikon di bootstrap 3

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

http://glyphicons.bootstrapcheatsheets.com/

Semoga itu bisa membantu.

@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

Saya menggunakan bootstrap dengan namespace dan glyphicons tidak berfungsi tetapi setelah menambahkan baris di atas dalam glyphicons kode berfungsi dengan baik.

Saya baru saja mengganti nama font dari bootstrap.css menggunakan Ctrl + c, Ctrl + v dan berhasil.