Question

我正在使用glyphicon图标，它在按钮内使用。但是图标的大小对按钮来说太大了。如何减小glyphicon的大小？我已经使用过小标签而且它不起作用。

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，{ {1}}，-md和-sm。

＆＃13;

-xs

＆＃13;

.glyphicon-lg {
  font-size: 18px;
}

.glyphicon-md {
  font-size: 14px;
}

.glyphicon-sm {
  font-size: 12px;
}

.glyphicon-xs {
  font-size: 10px;
}

＆＃13;

Answer 5

与更改font-size（或相关的样式）相同。使用style =＆＃34; font-size：12px;＆＃34;

您可以使用内联样式格式，例如

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

如何减少boostrap中glyphicon的大小

5 个答案: