Icônes Awesome Awesome Font Font

Je suis en utilisant FontAwesome icônes dans mon sensibles Bootstrap site web et que vous voulez afficher des icônes de différentes tailles en fonction de la résolution de l'écran.

Idéalement, j'aimerais afficher la police impressionnant icônes à l'aide d'un pourcentage des conteneurs de largeur, c'est à dire 50% de la largeur, de sorte qu'ils de l'échelle en haut et en bas. Je sais que je pourrais probablement le faire simplement en utilisant svg icônes, mais je voulais utiliser FontAwesomecomme je l'utilise d'ailleurs dans mon site.

- Je comprendre que vous pouvez spécifier la taille à l'aide de classes, c'est à dire la fa-lg ou fa-2x. Serait la meilleure solution est d'utiliser Bootstrap classes de masquer et d'afficher les différentes tailles en fonction de la résolution de l'écran, ou vous pouvez obtenir les icônes à l'échelle automatiquement à l'aide de pourcentage?

source d'informationauteur user1052096

  1. 11

    Vous devez voir cette réponse:

    L'échelle des polices fondées sur la largeur du conteneur

    Utiliser "vw" unités de taille de police. Également vérifier le navigateur table de support qui est mentionné là - son assez bon.

    Cheers!

  2. 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;
}
}
  3. 2

    Oui, le meilleur moyen est de définir CSS donnant la glyphicon une police de taille à votre convenance:

    .glyphicon-small {
font-size: 1.2em;
}
.glyphicon-medium {
font-size: 2em;
}
.glyphicon-big {
font-size: 4em;
}

    Mais, si vous voulez l'adapter par la taille de l'écran, vous pouvez avoir qu'une seule classe CSS et de le modifier en cours d'exécution avec CSS règle @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 permettra de nettoyer votre code et vous aurez vraiment de bons résultats avec un minimum d'effort de codage 😉