Pertanyaan Bootstrap 3 Glyphicons CDN


PERHATIAN!

Ikon Bootstrap kembali setelah permintaan tarik ini bergabung.


Setelah bolak-balik tentang ini selama beberapa minggu terakhir, saya memutuskan untuk melakukannya mengembalikan ikon ikon Glyphicons ke repo utama. Mengingat betapa lazimnya ikon di UI, mungkin merugikan sebagian besar orang untuk tidak menyertakannya (atau font ikon lain) di tempat yang sama dengan CSS dan JS.

Dengan pembaruan ini, lakukan hal berikut:

  • Memulihkan dokumentasi (pada halaman Komponen)
  • Variabel baru, @icon-font-path dan @icon-font-name, untuk fleksibilitas dalam menambah dan menghapus font ikon
  • Upgrade ke Glyphicons terbaru (menambahkan 40 ikon baru)
  • Menghapus Glyphicons lama menyebutkan dari halaman CSS

Kami akan bekerja untuk meningkatkan penyesuaian ikon font di masa depan sehingga swapping font libraries dapat lebih mudah (yang merupakan motivasi keseluruhan untuk penghapusan asli).


Yang merupakan url CDN versi baru Twitter Bootstrap Glyphicons?

Dari Bootstrap 3 mereka dipindahkan ke repositori terpisah, tetapi saya tidak menemukan CDN apa pun.

Dari dokumentasi resmi:

Dengan peluncuran Bootstrap 3, ikon telah dipindahkan ke repositori terpisah. Hal ini membuat proyek utama seramping mungkin, membuatnya lebih mudah bagi orang-orang untuk menukar pustaka ikon, dan membuat ikon ikon Glyphicons lebih siap tersedia untuk lebih banyak orang di luar Bootstrap.

Di atas situs web resmi mereka tidak memberikan url CDN untuk ikon.

Di mana bisa menemukannya? Saya tidak ingin mengunduh repositori dan memasukkannya ke dalam proyek saya.


76
2017-08-14 03:45


asal


Jawaban:


Dengan baru-baru ini pelepasan bootstrap 3, dan glyphicons yang digabung kembali ke repositori Bootstrap utama, Bootstrap CDN sekarang melayani Bootstrap 3.0 css lengkap termasuk Glyphicons. Referensi Bootstrap css adalah semua yang perlu Anda sertakan: Glyphicons dan dependensinya berada di jalur relatif di situs CDN dan direferensikan di bootstrap.min.css.

Di html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

Di css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Ini bekerja demo.

Catatan yang harus Anda gunakan .glyphicon kelas bukan .icon:

Contoh:

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

Juga mencatat yang masih perlu Anda sertakan bootstrap.min.js untuk penggunaan komponen Bootstrap JavaScript, lihat Bootstrap CDN untuk url.


Jika Anda ingin menggunakan Glyphicons secara terpisah, Anda dapat melakukannya dengan langsung merujuk pada Glyphicons css Bootstrap CDN.

Di html:

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

Di css:

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

Sejak itu css file sudah menyertakan semua dependensi Glyphicons yang diperlukan (yang berada di jalur relatif pada situs Bootstrap CDN), menambahkan css file adalah semua yang harus dilakukan untuk mulai menggunakan Glyphicons.

Ini bekerja demo dari Glyphicons tanpa Bootstrap.


131
2017-08-14 07:17



Sebuah alternatif akan digunakan Font-Awesome untuk ikon:

Termasuk Font-Awesome

Buka Font-Awesome di CDNJS dan salin url CSS versi terbaru:

<link rel="stylesheet" href="<url>">

Atau dalam CSS

@import url("<url>");

Sebagai contoh (perhatikan, versi akan berubah):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Pemakaian:

<i class="fa fa-bed"></i>

Itu mengandung banyak ikon!


27
2017-08-14 03:54



Meskipun Bootstrap CDN memulihkan glyphicons ke bootstrap.min.css, file Bootswatch css Bootstrap CDN tidak menyertakan glyphicons.

Misalnya tema Amelia: http://bootswatch.com/amelia/ 

Default Amelia memiliki glyphicons dalam file ini: http://bootswatch.com/amelia/bootstrap.min.css 

Tapi file css Bootstrap CDN tidak termasuk glyphicons: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Jadi seperti yang disebutkan oleh @edsioufi, Anda harus memasukkan Anda harus menyertakan glphicons css, jika Anda menggunakan file Bootswatch dari CDN bootstrap. Mengajukan: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css


2
2017-09-17 18:40