Glyphicons lớn hơn

212

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 của 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ể có được kích thước này mà không cần sử dụng lớp btn-lg trong khi chỉ sử dụng một khoảng?

Điều này mang lại một glyphicon nhỏ:

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

— guiomie
nguồn

372

Bạn chỉ có thể cung cấp cho glyphicon một kích thước phông chữ theo ý thích của bạn:

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

tuyệt quá! Trong trường hợp của tôi, tôi đã có một nhóm đầu vào-btn với một nút và nút này lớn hơn một chút. Vì vậy, tôi chỉ đưa ra "cỡ chữ: 95%" cho glyphicon của mình và nó đã được giải quyết.

— victorf

41

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

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

Điều này cho phép bạn thay đổi kích thước khi đang bay. 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 cho tất cả.

— Randy Greencorn
nguồn

2

Trong phong cách nội tuyến nói chung là cách tiếp cận không tốt. Nếu bạn cần các kiểu cụ thể cho một số thành phần, chỉ cần áp dụng kích thước phông chữ mới thông qua lớp cha mẹ

— Kaloyan Stamatov

đôi khi đó là một lần tắt và bạn không thể bị làm phiền mặc dù

— Matthew Lock

29

Các .btn-lglớp 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 tương tự font-sizevà line-heightcho khoảng của bạn ( .glyphicon-linkhoặc được tạo mới .glyphicons-lgnếu bạn sẽ sử dụng hiệu ứng này trong nhiều hơn một trường hợp), bạn sẽ nhận được một Glyphicon có cùng kích thước với nút lớn.

— Thiên thần
nguồn

4

thêm btn-lglớp là tùy chọn dễ dàng hơn nhiều. Câu trả lời tốt!

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

Mở rộng đoạn trích

— barış çıracı
nguồn

2

Trong trường hợp của tôi, tôi đã input-group-btncó một button, và cái này buttonlớn hơn một chút so với thùng chứa của nó. Vì vậy, tôi chỉ đưa ra 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>

— chiến thắng
nguồn

2

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

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

— Yên tĩnh
nguồn

0

Nếu bạn đang sử dụng bootstrap 3, hãy sử dụng thẻ, như thế 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 thẻ để đặt kích thước nhỏ hơn.
Mã số:


— Valynk
nguồn

Điều này hoàn toàn ngược lại với câu hỏi ... trừ khi bạn ghi đè lên các kiểu này sẽ làm cho nó nhỏ đi. Tôi chỉ sử dụng thẻ đó cho mục đích chính xác của nó vào ngày khác.

— Richard Barker