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>

— CoderBryan
sumber

Kemungkinan duplikat dari Glyphicons yang Lebih Besar

— Kevin Workman

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