如何縮小助推器中的glyphicon的尺寸

Question

我正在使用圖形圖標，它在按鈕內部使用。但是圖標的大小對於按鈕來說太大了。我怎樣才能減小圖形的大小？ 我已經使用小標籤，它沒有工作。

Answer 1

您可以使用內嵌樣式的格式爲特定glyphicon元素調整字體大小

<button> 
     <span style="font-size:12px" class="glyphicon glyphicon-search"></span> Search 
    </button> 

Answer 2

對於所有glyphicon你可以嘗試象下面這樣：

.glyphicon { 
    font-size: 12px; 
} 

對於一個特定的圖標：

.glyphicon.glyphicon-plus { 
    font-size: 12px; 
} 

希望這會有所幫助。

Answer 3

這將是你的正常實施glyphicon的：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 

你可以給所有glyphicons新的大小有：

.glyphicon { 
    font-size: 12px 
} 

，或者你可以給跨度ID：

<span class="glyphicon glyphicon-search" aria-hidden="true" id="small_glyphicon"></span> 

並更改ID的大小：

#small_glyphicon { 
    font-size: 12px; /* or lower */ 
} 

Answer 4

Glyphicons基本上字體。因此，您可以通過font-size屬性指定所需的大小。

我傾向於保持這四個類glyphicon-lg，-md，在我的項目-sm和-xs，因爲它們一般與btn-lg，-md，-sm和-xs工作。

.glyphicon-lg { 
 
    font-size: 18px; 
 
} 
 

 
.glyphicon-md { 
 
    font-size: 14px; 
 
} 
 

 
.glyphicon-sm { 
 
    font-size: 12px; 
 
} 
 

 
.glyphicon-xs { 
 
    font-size: 10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="glyphicon glyphicon-lg glyphicon-asterisk"></div> 
 
<div class="glyphicon glyphicon-md glyphicon-asterisk"></div> 
 
<div class="glyphicon glyphicon-sm glyphicon-asterisk"></div> 
 
<div class="glyphicon glyphicon-xs glyphicon-asterisk"></div>

Answer 5

一樣改變字體大小（或樣式爲此事）。 使用style =「font-size：12px;」

您可以使用線內樣式格式，例如

<button type="button" class="btn btn-default" aria-label="Left Align"> 
    <span class="glyphicon glyphicon-align-left" aria-hidden="true" style= 
    "font-size: 12px;"></span> 
</button> 

或在您的自定義CSS文件中，例如

.glyphicon{ 
    font-size: 12px; 
     }