Glyphicons yang lebih besar

212

Bagaimana cara membuat Glyphicons yang lebih besar di twitter bootstrap 3.0 (bukan 2.3.x).

Kode ini akan membuat glyphicons saya besar:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

Bagaimana saya bisa mendapatkan ukuran ini tanpa menggunakan kelas btn-lg dengan hanya menggunakan rentang?

Ini memberi glyphicon kecil:

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

— guiomie
sumber

372

Anda bisa memberikan glyphicon ukuran font sesuai keinginan Anda:

span.glyphicon-link {
    font-size: 1.2em;
}

Bagus! Dalam kasus saya, saya memiliki input-grup-btn dengan tombol, dan tombol ini sedikit lebih besar. Jadi saya hanya memberi "font-size: 95%" untuk glyphicon saya dan sudah terpecahkan.

— victorf

41

Begini cara saya melakukannya:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

Ini memungkinkan Anda untuk mengubah ukuran dengan cepat. Berfungsi paling baik untuk persyaratan ad hoc untuk mengubah ukuran, daripada mengubah css dan menerapkannya pada semua.

— Randy Greencorn
sumber

2

Secara umum gaya inline bukanlah pendekatan yang baik. Jika Anda memerlukan gaya khusus untuk beberapa komponen, cukup terapkan ukuran font baru melalui kelas induknya

— Kaloyan Stamatov

kadang-kadang hanya satu dan Anda tidak dapat diganggu

— Matthew Lock

29

The .btn-lgkelas memiliki CSS berikut di Bootstrap 3 ( Link ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Jika Anda menerapkan hal yang sama font-sizedan line-heightrentang Anda (salah satu .glyphicon-linkatau yang baru dibuat .glyphicons-lgjika Anda akan menggunakan efek ini di lebih dari satu contoh), Anda akan mendapatkan Glyphicon dengan ukuran yang sama dengan tombol besar.

— Angelique
sumber

4

menambahkan btn-lgkelas adalah pilihan yang jauh lebih mudah. Jawaban yang bagus!

— Neel

6

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Luaskan cuplikan

— barış çıracı
sumber

2

Dalam kasus saya, saya punya input-group-btndengan button, dan ini buttonsedikit lebih besar dari wadahnya. Jadi saya hanya memberi font-size:95%untuk glyphicon saya dan diselesaikan.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

— victorf
sumber

2

Tulis di <h1>atau <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

— diam
sumber

0

Jika Anda menggunakan bootstrap 3, gunakan tag, seperti ini. Ini berfungsi sempurna untuk Bootstrap 3.
Anda bahkan dapat menggunakan beberapa tag untuk mengatur ukuran lebih kecil.
Kode:


— Valynk
sumber

Ini adalah kebalikan dari pertanyaan ... kecuali jika Anda mengganti gaya ini akan membuatnya kecil. Saya hanya menggunakan tag itu untuk tujuan yang tepat beberapa hari lalu.

— Richard Barker