如何减小引导程序中字形的大小

Question

我正在使用一个字形图标，它用在一个按钮内。但是图标的大小对于按钮来说太大了。如何减小字形图标的大小？我已经使用了小标签，但它没有用。

Answer 1

对于所有的字形，您可以像下面这样尝试：

    .glyphicon {
    font-size: 12px;
}

对于特定图标：

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

希望对您有所帮助。

Answer 2

这将是您对字形图标的正常实现：

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

你可以给所有的字形一个新的大小：

.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 3

您可以使用内联样式格式来调整特定字形元素的字体大小

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

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

与更改字体大小（或相关样式）相同。使用样式= "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;
      }

如何减小引导程序中字形的大小

How to reduce the size of the glyphicon in boostrap

html

css

bootstrap-grid