Làm thế nào để tôi làm cho Glyphicons lớn hơn? (Thay đổi kích thước?)

Tôi muốn làm cho glyphicon toàn cầu lớn hơn để nó chiếm một phần lớn của trang (đó là hình ảnh vector). Nó không ở trong một nút hay bất cứ thứ gì; nó chỉ một mình. Có cách nào để làm việc này không?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

Tăng kích thước phông chữ của glyphiconđể tăng tất cả kích thước biểu tượng.

.glyphicon {
    font-size: 50px;
}

Để chỉ nhắm mục tiêu một biểu tượng,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

Fontawgie có một giải pháp hoàn hảo cho việc này.

Tôi thực hiện như vậy. chỉ trên tệp .css chính của bạn thêm điều này

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

Trong ví dụ của bạn, bạn chỉ cần làm điều này.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

Nếu bạn đang sử dụng bootstrap và font-awesome thì thật dễ dàng, không cần phải viết một dòng mã mới, chỉ cần thêm fa-Nx, như bạn muốn, xem bản demo

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

Có, và về cơ bản, bạn cũng có thể sử dụng kiểu nội tuyến:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

cố gắng sử dụng tiêu đề, không cần thêm css

<h1 class="glyphicon glyphicon-plus"></h1>

Ví dụ: thêm lớp:

btn-lg - LỚN

btn-sm - NHỎ

btn-xs - Rất nhỏ

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

Liên kết giới thiệu Bootstrap: Glyphicons Bootstrap

Tôi đã sử dụng các lớp tiêu đề bootstrap ("h1", "h2", v.v.) cho việc này. Bằng cách này bạn có được tất cả các lợi ích kiểu mà không cần sử dụng các thẻ thực tế. Đây là một ví dụ:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>