0

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

4

5 回答 5

2

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

 <button>
       <span style="font-size:12px" class="glyphicon glyphicon-search"></span> Search
   </button>
于 2017-10-10T05:20:01.787 回答
0

与更改字体大小（或样式）相同。使用 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;
      }
于 2017-10-10T05:36:02.403 回答
0

Glyphicons 本质上是字体。font-size因此，您可以通过属性指定所需的大小。

我倾向于在我的项目中保留这四个类glyphicon-lg,和-md，因为它们通常可以很好地与,和.-sm-xsbtn-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>

于 2017-10-10T05:23:28.983 回答
0

对于所有 glyphicon，您可以尝试如下：

    .glyphicon {
    font-size: 12px;
}

对于特定图标：

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

希望它会有所帮助。

于 2017-10-10T05:19:19.877 回答
0

这将是您对 glyphicon 的正常实现：

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

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

.glyphicon { 
    font-size: 12px 
}

或者你可以给跨度 a ID：

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

并更改大小ID：

#small_glyphicon {
    font-size: 12px; /* or lower */
}
于 2017-10-10T05:19:43.373 回答