[Bootstrap] Larger glyphicon icon

2015-02-26

摘要:[Bootsrap] Larger glyphicon icon

當我們在使用 Bootstrap 的 glyphicon icon 時看起來都會小小的 ,

當我們需要比較大尺寸的 icon 時 , 下意識都會去修改或增加其 width 和 height ,

但是這樣是不會有任何效果的 , 若要修改你必須針對它的 font-size 屬性 ,

 <i  class= 'glyphicon glyphicon-briefcase '></i>

另外修改 boostrap 的 css : 修改 font-size 從 14px 改成 18px

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;  // 原始為 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

這樣子的話基本上可以達到你要的效果 , 但是通常直接對 bootstrap 的 css 做修改

其實是不太好的 , 因為會影響到其他部份 ,

所以下列的方式會比較好 , 在 <i> 標籤外另外新增一個 div , 如下 :

<div id="test">
  <i  class= 'glyphicon glyphicon-briefcase '></i>
  </div>

增加 css 如下 :

#test .glyphicon{
  font-size:18px;
}

範例程式碼如下 : JSBIN

JS Bin

回首頁