响应式大小字体真棒图标答案

【问题标题】：Responsive Size Font Awesome Icons响应式大小字体真棒图标
【发布时间】：2023-03-08 22:11:01
【问题描述】：

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

理想情况下，我想使用容器宽度的百分比（即宽度的 50%）来显示字体真棒图标，因此它们可以按比例放大和缩小。我知道我可能只使用 svg 图标就可以做到这一点，但我想使用 FontAwesome，因为我在我网站的其他地方使用它。

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

【问题讨论】：

标签： css twitter-bootstrap icons font-awesome

【解决方案1】：

是的，最好的方法是定义 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;
    }
}

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

【讨论】：

【解决方案2】：

你必须看到这个答案：

Font scaling based on width of container

在字体大小上使用“vw”单位。还要检查那里提到的浏览器支持表 - 它非常好。

干杯！

【讨论】：

【解决方案3】：

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

【讨论】：