使用引导程序时如何使图标变小？答案

【问题标题】：How can I make icon small when using bootstrap?使用引导程序时如何使图标变小？
【发布时间】：2013-01-06 12:17:43
【问题描述】：

如果我想最小化图标大小，使用引导程序时如何使图标变小？

我想最小化这个人类图标的大小。

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

【问题讨论】：

在此处发布您的相关 CSS。
@Pawan 谢谢我使用引导程序。它太长了，所以我不得不使用 JSFiddle 把它们都放好。请查看我的演示
考虑敬畏的回答stackoverflow.com/a/1341462/1135581
我尝试用background-size: 50% 50%; 包裹它们，但没有成功:(

标签： css

【解决方案1】：

如果您使用的是 Bootstrap 3，则可以使用  标签，如下所示： 它与 Bootstrap 3 完美配合。

【讨论】：

【解决方案2】：

可以使用 CSS 属性 font-size:

精确地调整字形图标和其他图标的大小

你知道……是字形等等。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这些不是引导文档中的 btn-xs 样式，以及 class="btn btn-xs" 不起作用

【解决方案4】：

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

小文本

为了不强调行内或文本块，使用  标记将文本设置为父级大小的 85%。标题对于嵌套的  元素，元素会收到自己的 font-size。

您也可以使用带有.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>

【讨论】：

【解决方案5】：

以上方法都不适合我，我使用的是 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，因为简单地改变图标的大小将不再修改环绕按钮的大小。

【讨论】：