CSS 响应式大小字体真棒图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29299574/
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
Responsive Size Font Awesome Icons
提问by user1052096
I'm using FontAwesomeicons in my responsive Bootstrapwebsite and want to display icons at different sizes depending on the screen resolution.
我FontAwesome在响应式Bootstrap网站中使用图标，并希望根据屏幕分辨率显示不同大小的图标。
Ideally I'd like to display the font awesome icons using a percentage of the containers width, i.e. 50% of the width, so they scale up and down. I know that I could probably do this just using svg icons, but I wanted to use FontAwesome, as I'm using it elsewhere in my site.
理想情况下，我想使用容器宽度的百分比来显示字体真棒图标，即宽度的 50%，因此它们可以按比例放大和缩小。我知道我可能只使用 svg 图标就可以做到这一点，但我想使用FontAwesome，因为我在我网站的其他地方使用它。
I understand you can specify the size using classes, i.e. fa-lg or fa-2x. Would the best solution be to use Bootstrapclasses to hide and display the various sizes depending on screen resolution, or can you get the icons to scale automatically using percentage?
我知道您可以使用类指定大小，即 fa-lg 或 fa-2x。最好的解决方案是使用Bootstrap类来根据屏幕分辨率隐藏和显示各种尺寸，还是可以使用百分比自动缩放图标？
回答by Artur Czy?ewski
You HAVE TO see this answer:
你必须看到这个答案：
Font scaling based on width of container
Use "vw" units on font-size. Also check browser support table which is mentioned there - its pretty good.
在字体大小上使用“vw”单位。还要检查那里提到的浏览器支持表 - 它非常好。
Cheers!
干杯!
回答by GigolNet Guigolachvili
/* Font ico (Font-Awesome) */
.elastic-fai-xl{
font-size:80px;
}
.elastic-fai-lg{
font-size:50px;
}
.elastic-fai-md{
font-size:40px;
}
.elastic-fai-sm{
font-size:30px;
}
.elastic-fai-xs{
font-size:20px;
}
/* Extra small devices */
@media(max-width:544px){
.elastic-fai-group > .elastic-fai, .elastic-fai-xs{
font-size:20px;
}
}
/* Small devices */
@media(min-width:544px){
.elastic-fai-group > .elastic-fai, .elastic-fai-sm{
font-size:30px;
}
}
/* Medium devices */
@media(min-width:768px){
.elastic-fai-group > .elastic-fai, .elastic-fai-md{
font-size:40px;
}
}
/* Large devices */
@media(min-width:992px){
.elastic-fai-group > .elastic-fai, .elastic-fai-lg{
font-size:50px;
}
}
/* Exrta Large devices */
@media(min-width:1200px){
.elastic-fai-group > .elastic-fai, .elastic-fai-xl{
font-size:80px;
}
}
回答by Jordi Castilla
Yes, the best way is define CSS giving the glyphicon a font-size to your liking:
是的，最好的方法是定义 CSS，根据您的喜好为字形提供字体大小：
.glyphicon-small {
font-size: 1.2em;
}
.glyphicon-medium {
font-size: 2em;
}
.glyphicon-big {
font-size: 4em;
}
But, if you want to adapt it by screen size, you can have just one CSS class and modify it during execution with CSS @media ruleto get desired results:
但是，如果您想根据屏幕大小调整它，您可以只使用一个 CSS 类并在执行期间使用CSS @media 规则修改它以获得所需的结果：
@media screen and (max-width: 299px) {
.glyphicon {
font-size: 1.2em;
}
}
@media screen and (min-width: 300px) and (max-width: 799px) {
.glyphicon {
font-size: 2em;
}
}
@media screen and (min-width: 800px) {
.glyphicon {
font-size: 4em;
}
}
This will clean your code and you will have really nice results with minimum coding effort ;)
这将清理您的代码，您将以最少的编码工作获得非常好的结果;)
