Bigly Glyphicons

Question

Làm cách nào để tạo Glyphicons lớn hơn trong twitter bootstrap 3.0 (không phải 2.3.x).

Mã này sẽ làm cho glyphicons tôi lớn:

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

Làm thế nào tôi có thể nhận được kích thước này mà không sử dụng lớp btn-lg khi sử dụng chỉ một khoảng?

Điều này cho phép một glyphicon nhỏ:

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

Answer 1

Bạn chỉ có thể cung cấp cho các glyphicon một font-size theo ý thích của bạn:

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

Answer 2

Lớp .btn-lg có CSS ​​sau đây trong Bootstrap 3 (link):

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

Nếu bạn áp dụng cùng một font-size và line-height vào khoảng thời gian của bạn (hoặc .glyphicon-link hoặc mới được tạo .glyphicons-lg nếu bạn định sử dụng hiệu ứng này trong nhiều trường hợp), bạn sẽ nhận được Glyphicon có cùng kích thước với nút lớn.

Answer 3

Đây là cách tôi làm điều đó:

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

này cho phép bạn thay đổi kích thước một cách nhanh chóng. Hoạt động tốt nhất cho các yêu cầu đặc biệt để thay đổi kích thước, thay vì thay đổi css và áp dụng nó cho tất cả.

Answer 4

Trong trường hợp của tôi, tôi có một số input-group-btn với số button và button lớn hơn một chút so với vùng chứa của nó. Vì vậy, tôi chỉ cho font-size:95% cho glyphicon của tôi và nó đã được giải quyết.

<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> 

Answer 5

<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>

Answer 6

Nếu bạn đang sử dụng bootstrap 3, thẻ sử dụng, giống như <small><span class="glyphicon glyphicon-send"></span></small> này Nó hoạt động hoàn hảo cho Bootstrap 3.
Bạn thậm chí có thể sử dụng nhiều <small> thẻ để thiết lập kích thước hơn nhỏ hơn.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Answer 7

Viết <span> của bạn trong <h1> hoặc <h2>:

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