使用bootstrap时如何使图标变小？

Question

如果我想最小化图标大小，使用bootstrap时如何使图标变小？

这是演示http://jsfiddle.net/AqUBu/

我想尽量减少这个人类偶像的大小。

<span class='badge badge-success'><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i></span>

Answer 1

如果您使用的是Bootstrap 3，则可以使用<small>标记，如下所示：<small><span class="glyphicon glyphicon-send"></span></small> 它与Bootstrap 3完美配合。

Answer 2

使用CSS属性font-size:

，可以使用 精确 重新调整字形和其他图标的大小

你知道......是字形和所有。

Answer 3

您可以使用class="btn btn-xs"

参考：https://getbootstrap.com/components/

Answer 4

你可以使用Font Awesome http://fortawesome.github.com/Font-Awesome/从fonts.Font Awesome完全兼容Twitter Bootstrap 2＆amp; 3.您可以轻松地设置图标颜色，大小，阴影以及CSS可能的任何内容。

Answer 5

来自http://getbootstrap.com/css/#small-text

  

小文

     

如果不强调内联或文本块，请使用   <small>标记用于将文本设置为父级大小的85％。标题   对于嵌套的font-size元素，元素会收到自己的<small>。

     

您也可以使用带.small的内联元素代替   任何<small>。

尝试：

<span class='badge badge-success small'>
  <i class='icon-user icon-white'></i>
  <i class='icon-user icon-white'></i>
  <i class='icon-user icon-white'></i>
</span>

Answer 6

以上都没有为我工作，我使用的是Bootstrap 4和FontAwesome图标的组合。我发现Bootstrap 4有自己的类来制作更小的按钮：

<button class="btn btn-sm btn-secondary ">
    <i class="fa fa-pencil"></i>
</button>

Bootstrap 4 button documentation (#Sizes)

如果你想制作一个小于此的按钮，你可能需要制作一些自定义的CSS，因为只需更改图标的大小就不会再修改包装按钮的大小。