Отзывчивый размер шрифта Удивительные иконки

Я использую значки FontAwesome на моем FontAwesome сайте Bootstrap и хочу отображать значки разных размеров в зависимости от разрешения экрана.

В идеале я хотел бы отображать шрифты с удивительными значками, используя процент ширины контейнеров, то есть 50% от ширины, поэтому они масштабируются вверх и вниз. Я знаю, что я мог бы это сделать, просто используя значки svg, но я хотел использовать FontAwesome, поскольку я использую его в другом месте на моем сайте.

Я понимаю, что вы можете указать размер, используя классы, то есть fa-lg или fa-2x. Лучше ли было бы использовать классы Bootstrap чтобы скрыть и отобразить различные размеры в зависимости от разрешения экрана, или вы можете автоматически набирать значки, используя процент?

ОТВЕТЫ

Ответ 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;
    }
}

Ответ 3

Да, лучший способ - определить 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;
    }
}

Это очистит ваш код, и у вас будут очень хорошие результаты с минимальными усилиями по кодированию;)