CSS 使用引导程序时如何使图标变小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14472599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make icon small when using bootstrap?
提问by MKK
If I want to minimize icon size, how can I make icon small when using bootstrap?
如果我想最小化图标大小，如何在使用引导程序时使图标变小？
This is demo http://jsfiddle.net/AqUBu/
这是演示http://jsfiddle.net/AquUBu/
I'd like to minimize the size of this human icon.
我想最小化这个人类图标的大小。
<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>
回答by Mrinal
If you are using Bootstrap 3, you can use the <small>tag, like this: <small><span class="glyphicon glyphicon-send"></span></small>It works perfectly with Bootstrap 3.
如果您使用的是 Bootstrap 3，则可以使用该<small>标签，如下所示：<small><span class="glyphicon glyphicon-send"></span></small>它与 Bootstrap 3 完美配合。
回答by Danny Mahoney
Glyphicons and other icons can be re-sized preciselywith the CSS property font-size:
Glyphicons 和其他图标可以使用 CSS 属性精确调整大小font-size:
You know... being glyphs and all.
你知道......成为字形和所有。
回答by sssimon
You can use class="btn btn-xs"
您可以使用 class="btn btn-xs"
Reference: https://getbootstrap.com/components/
回答by Simon
From http://getbootstrap.com/css/#small-text
来自http://getbootstrap.com/css/#small-text
Small text
For de-emphasizing inline or blocks of text, use the
<small>tag to set text at 85% the size of the parent. Heading elements receive their ownfont-sizefor nested<small>elements.You may alternatively use an inline element with
.smallin place of any<small>.
小文字
要淡化内联或文本块，请使用
<small>标记将文本设置为父级大小的 85%。标题元素接收它们自己font-size的嵌套<small>元素。您也可以使用内联元素
.small代替 any<small>。
Try:
尝试：
<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>
回答by Rohan
None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:
以上都不适合我，我使用的是 Bootstrap 4 和 FontAwesome 图标的组合。我发现 Bootstrap 4 有自己的类来制作更小的按钮：
<button class="btn btn-sm btn-secondary ">
<i class="fa fa-pencil"></i>
</button>
Bootstrap 4 button documentation (#Sizes)
If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.
如果你想让一个按钮比这更小，你可能需要制作一些自定义 css，因为简单地改变图标的大小将不再修改环绕按钮的大小。
