Css 使用引导时如何使图标变小？

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

这是演示

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

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

---

如果您使用的是Bootstrap 3，则可以使用

标记，如下所示：

它与Bootstrap 3完美配合。

您可以使用

class=“btn btn xs”

---

参考：

字形图标和其他图标可以使用CSS属性

字体大小：

你知道。。。是字形和所有符号。

来自

小文本

对于取消强调内联或文本块，请使用

标记将文本设置为父级大小的85%。标题 对于嵌套的

元素，元素接收其自己的

字体大小

您也可以使用带有
.small
的内联元素来代替
任何

尝试：

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

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




如果你想制作一个比这个小的按钮，你可能需要制作一些自定义css，因为简单地改变图标的大小将不会再修改包装按钮的大小。
在这里发布你的相关css。@Pawan谢谢我使用bootstrap。它太长了，所以我不得不使用JSFIDLE来放置它们。请检查我的演示文稿，考虑一下awe的答案，我试着用
背景尺寸包装它们：50%50%但它不起作用：(
<button class="btn btn-sm btn-secondary ">
    <i class="fa fa-pencil"></i>
</button>