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>
css twitter-bootstrap twitter-bootstrap-3 glyphicons guiomie
sumber

Jawaban:

372

Anda bisa memberikan glyphicon ukuran font sesuai keinginan Anda:

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

sumber
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 <span>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. <small><span class="glyphicon glyphicon-send"></span></small>Ini berfungsi sempurna untuk Bootstrap 3.
Anda bahkan dapat menggunakan beberapa <small>tag untuk mengatur ukuran lebih kecil.
Kode:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

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