响应大小字体真棒图标

Question

我FontAwesome在响应式Bootstrap网站中使用图标,并希望根据屏幕分辨率显示不同大小的图标.

理想情况下,我想使用容器宽度的百分比显示字体真棒图标,即宽度的50%,因此它们可以向上和向下缩放.我知道我可能只是使用svg图标,但我想使用FontAwesome,因为我在我的网站的其他地方使用它.

我知道你可以使用类来指定大小,即fa-lg或fa-2x.最好的解决方案是使用Bootstrap类来隐藏和显示各种大小,具体取决于屏幕分辨率,还是可以使用百分比自动缩放图标？

Answer 1

你必须看到这个答案:

基于容器宽度的字体缩放

在font-size上使用"vw"单位.还要检查那里提到的浏览器支持表 - 非常好.

干杯!

Answer 2

是的，最好的方法是定义 CSS，根据您的喜好为字形提供字体大小：

.glyphicon-small {
    font-size: 1.2em;
}

.glyphicon-medium {
    font-size: 2em;
}

.glyphicon-big {
    font-size: 4em;
}

但是，如果你想根据屏幕尺寸进行调整，你可以只使用一个 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;
    }
}

这将清理您的代码，并且您将以最少的编码工作获得非常好的结果;)