Адаптивный размер шрифта Awesome Icons

Question

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

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

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

Answer 1

Вы должны увидеть этот ответ:

Масштабирование шрифта в зависимости от ширины контейнера

Используйте единицы измерения "vw" на размер шрифта. Также проверьте таблицу поддержки браузера, которая упоминается там - это довольно хорошо.

Ура!

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

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