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>

Jawaban:


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.


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.


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>


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>

2

Tulis <span>di <h1>atau <h2>:

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

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>


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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.