web-dev-qa-db-fra.com

Icônes impressionnantes de police de taille sensible

J'utilise des icônes FontAwesome dans mon site Web réactif Bootstrap et je souhaite afficher des icônes de différentes tailles en fonction de la résolution de l'écran.

Idéalement, je voudrais afficher les icônes impressionnantes de la police en utilisant un pourcentage de la largeur des conteneurs, c'est-à-dire 50% de la largeur, afin qu'ils augmentent et diminuent. Je sais que je pourrais probablement le faire en utilisant simplement des icônes svg, mais je voulais utiliser FontAwesome, car je l'utilise ailleurs dans mon site.

Je comprends que vous pouvez spécifier la taille en utilisant des classes, c'est-à-dire fa-lg ou fa-2x. La meilleure solution consisterait-elle à utiliser les classes Bootstrap pour masquer et afficher les différentes tailles en fonction de la résolution de l'écran, ou pouvez-vous obtenir une mise à l'échelle automatique des icônes à l'aide d'un pourcentage?

csstwitter-bootstrapiconsfont-awesome
16
user1052096

Vous DEVEZ voir cette réponse:

Mise à l'échelle de la police en fonction de la largeur du conteneur

Utilisez les unités "vw" sur la taille de la police. Consultez également le tableau de prise en charge du navigateur qui y est mentionné - c'est assez bon.

À votre santé!

13
Artur Czyżewski
/* 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
GigolNet Guigolachvili

Oui, la meilleure façon est de définir CSS en donnant au glyphicon une taille de police à votre convenance:

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

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

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

Mais, si vous souhaitez l'adapter en fonction de la taille de l'écran, vous pouvez avoir une seule classe CSS et la modifier lors de l'exécution avec règle CSS @media pour obtenir les résultats souhaités:

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

Cela nettoiera votre code et vous obtiendrez de très bons résultats avec un effort de codage minimum;)

1
Jordi Castilla