Twitter Bootstrap - 使 CSS 图标更大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13544114/
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
Twitter Bootstrap - Making CSS Icons bigger
提问by Jamesking56
I'm using Twitter Bootstrap and it says to use <i class="icon-flag"></i>if I want to use an icon from their CSS sprite.
我正在使用 Twitter Bootstrap，<i class="icon-flag"></i>如果我想使用他们的 CSS 精灵中的图标，它会说使用。
How can I add my own css class called .logo-iconwhich will take one of their icons but make it bigger?
如何添加我自己的 css 类，该类.logo-icon将采用他们的图标之一但使其更大？
My class currently looks like:
我的课程目前看起来像：
.logo-icon {
background-image: url("../img/glyphicons-halflings-white.png");
background-position: -312px -24px;
}
采纳答案by merv
It's not going to look as nice as using FontAwesome (which is an actual font), but you can scale glyphicons using the background-sizeproperty. This will also entail scaling all the other values by an identical factor, which means you can't just do this generally, but will need to do this for a single icon at a time.
它看起来不像使用 FontAwesome（它是一种实际的字体）那么好，但是您可以使用background-size属性缩放字形。这也将需要按相同的系数缩放所有其他值，这意味着您不能只是一般地这样做，而是需要一次为一个图标执行此操作。
Example, doubling the flag icon would be:
例如，将标志图标加倍是：
.icon-flag.logo-icon {
width: 28px; // 14px * 2
height: 28px; // 14px * 2
background-size: 938px 318px; // original dimensions * 2
background-position: -624px -48px; // original position * 2
}
If you do want to do this for arbitrary icons, you would be better off working with the LESS where you could probably generate this programatically. Personally, I think switching to FontAwesome is the better alternative.
如果您确实想对任意图标执行此操作，最好使用 LESS，您可以在其中以编程方式生成它。就个人而言，我认为切换到 FontAwesome 是更好的选择。
回答by azerafati
best and easiest
最好的和最简单的
is to change font size of the spantag
是改变span标签的字体大小
span.glyphicon {
font-size: 8px;
}
or
或者
<span class="glyphicon glyphicon-check" style="font-size: 1.2em"></span>
using FontAwesome?
使用 FontAwesome？
And if like me you use FontAwesome too, you could go hybrid;) use these classes
如果像我一样你也使用 FontAwesome，你可以混合使用 ;) 使用这些类
<span class="glyphicon glyphicon-check fa-lg"></span>
<span class="glyphicon glyphicon-check fa-2x"></span>
<span class="glyphicon glyphicon-check fa-3x"></span>
<span class="glyphicon glyphicon-check fa-4x"></span>
回答by lao
What if you use scale()???
如果你使用 scale() 会怎样？？？
.logo-icon {
transform:scale(2.0,2.0);
-ms-transform:scale(2.0,2.0); /* IE 9 */
-moz-transform:scale(2.0,2.0); /* Firefox */
-webkit-transform:scale(2.0,2.0); /* Safari and Chrome */
-o-transform:scale(2.0,2.0); /* Opera */
}
Isn't it easier to use and maintain? You can scale to any size you wish without recalculating background-size and position.
不是更容易使用和维护吗？您可以缩放到您希望的任何大小，而无需重新计算背景大小和位置。
I am using this for reducing the size of the icons in some parts of my system. I spent around 1 hour looking for a solution to reduce and almost forgot about scale(). So, just sharing to help others. =D
我正在使用它来减小系统某些部分中图标的大小。我花了大约 1 个小时寻找减少的解决方案，几乎忘记了 scale()。所以，只是分享以帮助他人。=D
But, of course, if you make them bigger you will not get a perfect good looking icon.
但是，当然，如果您将它们放大，您将无法获得完美美观的图标。
回答by Fernando Kosh
I do prefer to simple change the font size:
我更喜欢简单地改变字体大小：
.large-icon {
padding: 11px 15px;
font-size: 40px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
