Question

我在响应式FontAwesome网站中使用Bootstrap图标，并希望根据屏幕分辨率显示不同尺寸的图标。

理想情况下，我希望使用容器宽度的百分比显示字体真棒图标，即宽度的50％，因此它们可以向上和向下缩放。我知道我可能只使用svg图标来做这件事，但我想使用FontAwesome，因为我在我网站的其他地方使用它。

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

Answer 1

你必须看到这个答案：

Font scaling based on width of container

使用＆＃34; vw＆＃34;字体大小的单位。还要检查那里提到的浏览器支持表 - 非常好。

干杯！

Answer 2

/* 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;
    }
}

Answer 3

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

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

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

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

但是，如果您想根据屏幕大小调整它，您可以只使用一个CSS类并在执行期间使用CSS @media rule对其进行修改以获得所需的结果：

@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;
    }
}

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

响应大小字体真棒图标

3 个答案: