jQuery 增加 Bootstrap 2.3 的 Glyphicons 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16429647/
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
Increase the size of Bootstrap 2.3's Glyphicons
提问by Himanshu Yadav
Is there an easy way of increasing the size of Glyphicons?
I found some solution like Font Awesomebut don't want to include new CSS library just to increase size 2 icons.
有没有一种简单的方法来增加 Glyphicons 的大小？
我找到了一些像Font Awesome这样的解决方案，但不想包含新的 CSS 库只是为了增加大小为 2 的图标。
采纳答案by Rajender Joshi
This is one way to increase the size of icons in Bootstrap 2.3. As I note in my comment, the results will be pretty poor because you are scaling the spritesheet image.
这是在 Bootstrap 2.3 中增加图标大小的一种方法。正如我在评论中指出的那样，结果将非常糟糕，因为您正在缩放 spritesheet 图像。
.test {
background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
width: 90px;
height: 90px;
background-size: 2100px 800px;
}
Consider Fontelloinstead. They allow you to generate a custom font based on the icons you choose.
可以考虑Fontello。它们允许您根据您选择的图标生成自定义字体。
回答by user2686734
Setting the font-size of the <span> tag worked for me
设置 <span> 标签的字体大小对我有用
<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
回答by Umur Kontac?
As of Bootstrap 3, glyphicons have been changed into fonts rather than sprites. This gives you more flexibility. For example, you can just set the font-sizeand move on.
自 Bootstrap 3 起，字形图标已更改为字体而不是精灵。这为您提供了更大的灵活性。例如，您可以设置font-size并继续。
<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>
Or you can simply write a modifier class:
或者您可以简单地编写一个修饰符类：
.glyphicon-2x {
font-size: 48px;
}
回答by Dwza
Just need to set the fontsize up :) You have more than one option to do this:
只需要设置 fontsize :) 你有不止一种选择来做到这一点：
First(set it straight to the element)
首先（将其直接设置为元素）
<span class="glyphicon glyphicon-search" style="font-size:30px"></span>
Second(set it in a css file)
第二（将其设置在 css 文件中）
.glyphicon{
font-size: 30px;
}
Third(build modify-classes) [i prefer this posibility]
第三（构建修改类）[我更喜欢这种可能性]
.glyphicon-2x{
font-size: 40px;
}
.glyphicon-3x{
font-size: 60px;
}
...
Usage:
用法：
<span class="glyphicon glyphicon-2x glyphicon-search"></span>
there are more options to get the third one more tiny. there for you should read more about Less
有更多选择可以让第三个更小。在那里你应该阅读更多关于 Less
according to your question and the comment that brandon gave me, you can use the above with a other icon contianer.
根据您的问题和布兰登给我的评论，您可以将上述内容与其他图标容器一起使用。
Bootstrap 2.3
引导程序 2.3
First
第一的
<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>
Second
第二
.icon-search{
-webkit-transform:scale(1.8);
-moz-transform:scale(1.8);
-o-transform:scale(1.8);
}
Third
第三
.icon-x2{
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-o-transform:scale(2.0);
}
.icon-x3{
-webkit-transform:scale(3.0);
-moz-transform:scale(3.0);
-o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>
回答by dave
You can use:
您可以使用：
.icon-whatever {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
But, it will look fuzzier the larger you go, as it is scaling the image up. A font-icon library will scale a lot better.
但是，它看起来越大越模糊，因为它正在放大图像。字体图标库会更好地扩展。
回答by cortex
You can override bootstrap's class, for example:
您可以覆盖引导程序的类，例如：
// Size and position are not working.
.icon-glass {
background-size: 800px;
backgroung-position: 10px 50px;
width: 24px;
height: 24px;
}
The problem is that icons will look ugly due to the resolution.
问题是由于分辨率的原因，图标看起来很难看。
Hope this helps!
希望这可以帮助！
回答by kinske
If you use the glyphicons for buttons it's pretty simple:
如果您将字形用于按钮，则非常简单：
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
The btn-lg defines the size. You can use btn-lg, bnt-sm, btn-sx
btn-lg 定义大小。您可以使用 btn-lg、bnt-sm、btn-sx
Edit: If you don't use buttons or lg is not large enough, you can add an own class and use font-size (only tested in bootstrap 3.0). In bootstrap 3.0 glyphicons exist as .svg so they won't look ugly
编辑：如果您不使用按钮或 lg 不够大，您可以添加一个自己的类并使用字体大小（仅在 bootstrap 3.0 中测试）。在 bootstrap 3.0 中，字形以 .svg 的形式存在，所以它们看起来不会难看
Example:
例子：
<button type="button" class="btn btn-default btn-lg myGlyphicon">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS:
CSS：
.myGlyphicon {font-size: 120%;}
or
或者
.myGlyphicon {font-size: 70px;}
回答by itsbalamurali
You can use IcoMoon.ioa very easy to use tool for generating icon font of different colours ,size's and even you can generate sprites from you selection.
您可以使用IcoMoon.io一个非常易于使用的工具来生成不同颜色、大小的图标字体，甚至可以从您的选择中生成精灵。
回答by Gabriel
I just found a very easy way—using "transform". For example, place:
我刚刚找到了一个非常简单的方法——使用“转换”。例如，放置：
.glyphicon-chevron-right {transform:scale(2.9,2.9);}
in your CSS to increase it 2.9 times.
在您的 CSS 中将其增加 2.9 倍。
回答by David Peters
If you're using Bootstrap 3, why don't you use emwidths on the icon? If the icons are embedded within headings/paragraphs/bodies etc. then using a font size in ems will increase the size of the icons relative to the paragraph that they're in.
如果您使用的是 Bootstrap 3，为什么不在em图标上使用宽度？如果图标嵌入在标题/段落/正文等中，那么在ems 中使用字体大小将增加图标相对于它们所在段落的大小。
For example, if you have:
例如，如果您有：
<span class="glyphicon glyphicon-adjust"></span>
In the css that customizes your bootstrap, simply add:
在自定义引导程序的 css 中，只需添加：
.glyphicon {font-size: 1.25 em;}
This will scale the glyphs.
这将缩放字形。
