Bagaimana Saya Membuat Glyphicons Lebih Besar? (Ubah Ukuran?)

239

Saya ingin membuat glyphicon dunia lebih besar sehingga menutupi sebagian besar halaman (ini adalah gambar vektor). Itu tidak di tombol atau apa pun; hanya sendirian. Apakah ada cara untuk melakukan ini?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
html css twitter-bootstrap glyphicons CoderBryan
sumber
Kemungkinan duplikat dari Glyphicons yang Lebih Besar
Kevin Workman

Jawaban:

367

Tambah ukuran font glyphiconuntuk menambah semua ukuran ikon.

.glyphicon {
    font-size: 50px;
}

Untuk menargetkan hanya satu ikon, 

.glyphicon.glyphicon-globe {
    font-size: 75px;
}
VenomVendor
sumber
2
Itu berhasil! (Saya akan menerimanya dalam 5 menit (itu waktu yang tersisa)) Apakah ada cara untuk memusatkannya? @VenomVendor
CoderBryan
2
text-centerdi div.
Aibrean
7
untuk membuat glyphicon lebih besar "on demand" gunakan .glyphicon.larger {ukuran font: 150%; }
user216661
Bagaimana dengan membuatnya lebih tipis?
Nofel
Saya harus menambahkan !important;ukuran font untuk mengganti CSS boostrap.
Sementara itu,
143

Fontawesome memiliki solusi sempurna untuk ini.

Saya menerapkan hal yang sama. hanya pada file .css utama Anda tambahkan ini

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

Dalam contoh Anda, Anda hanya perlu melakukan ini.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
Tuan Crowley
sumber
Bagus! Anda juga dapat menggunakan jumlah fraksional seperti 1.5em.
Mike Taverne
Jauh lebih baik daripada jawaban yang diterima dan menunjukkan solusi umum untuk masalah yang berulang.
Adam
71

Jika Anda menggunakan bootstrap dan font-mengagumkan maka itu mudah, tidak perlu menulis satu baris kode baru, cukup tambahkan fa-Nx, sebesar yang Anda inginkan, Lihat demo

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Ali Adravi
sumber
Glyphicons dan Font-Awesome bergabung!
Timo
Saya tidak mendukung menggabungkan FA dan Glyphicons. Lihat jawaban di bawah tentang cara memperbesar ukuran glyphicon menggunakan gaya inline atau melalui kelas css di atas. Atau untuk penggunaan solusi FA murni -> fa fa-globe fa-2x (v4.x)
MarcoZen
MarcoZen: lagipula dengan versi berikutnya dari bootstrap 4 Glyphicons akan dihapus, banyak dari kita sebelumnya menggunakan bersama.
Ali Adravi
17

Ya, dan pada dasarnya Anda juga dapat menggunakan gaya inline: 

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
Terje Solem
sumber
11

coba gunakan tajuk, tidak perlu css tambahan

<h1 class="glyphicon glyphicon-plus"></h1>
Bagus Cahyono
sumber
2
Anda dapat melakukan ini, tetapi itu tidak memberi Anda tingkat kontrol yang baik seperti yang dilakukan oleh sedikit CSS.
MattD
6
Menggunakan header karena efeknya pada ukuran font adalah anti-pola. Seorang pengguna yang menavigasi situs Anda dengan keyboard akan dikirim langsung ke ikon Anda karena pembaca layar menganggap itu menandakan judul / judul untuk konten yang paling penting di halaman.
Roy
9

Sebagai contoh .. tambahkan kelas:

btn-lg - BESAR

btn-sm - KECIL

btn-xs - Sangat kecil

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>

Tautan ref Bootstrap: Glyphicons Bootstrap

OpenWebWar
sumber
7
Pertanyaannya menganggap gambar, bukan gambar sebagai tombol.
user216661
0

Saya telah menggunakan kelas header bootstrap ("h1", "h2", dll.) Untuk ini. Dengan cara ini Anda mendapatkan semua manfaat gaya tanpa menggunakan tag yang sebenarnya. Berikut ini sebuah contoh:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

Alex Kozlov
sumber