Ansprechende Größe, Schriftart Awesome Icons

Ich bin mit FontAwesome Symbole in meinem reaktionsschnell Weg Bootstrap website und möchten, um die Anzeige von icons in verschiedenen Größen abhängig von der Bildschirmauflösung.

Idealerweise würde ich gerne die Anzeige der font-awesome-icons mit einem Anteil der Container, die Breite, D. H. 50% der Breite so skalieren Sie nach oben und unten. Ich weiß, dass ich könnte wahrscheinlich tun Sie dies nur mit svg-icons, aber ich wollte FontAwesome, denn ich verwende es an anderer Stelle in meiner Website.

Ich verstehe, Sie können die Größe mithilfe der Klassen, d.h. fa-lg oder fa-2x. Wäre die beste Lösung die Verwendung Bootstrap Klassen zum verstecken und anzeigen der verschiedenen Größen, je nach Bildschirmauflösung, oder können Sie die icons zu skalieren automatisch mit Prozentsatz?

InformationsquelleAutor user1052096 | 2015-03-27

  1. 11

    HABEN Sie, um ZU sehen, diese Antwort:

    Font-Skalierung basierend auf der Breite des Containers

    Verwenden "vw" - Einheiten auf font-size. Überprüfen Sie auch die browser-support-Tabelle, die dort erwähnt - ziemlich gut.

    Prost!

    InformationsquelleAutor Artur Czyżewski

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

    InformationsquelleAutor GigolNet Guigolachvili

  3. 2

    Ja, der beste Weg zu definieren, CSS-Angabe die glyphicon eine font-size nach Ihren wünschen:

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

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

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

    Aber, wenn Sie wollen, um eine Anpassung von Bildschirmgröße, können Sie einfach eine CSS-Klasse, und ändern Sie während der Ausführung mit CSS @media-Regel die gewünschten Ergebnisse zu erhalten:

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

    Dies wird reinigen Sie Ihren code und Sie haben wirklich schöne Ergebnisse mit minimalem Programmieraufwand 😉

    InformationsquelleAutor Jordi Castilla

Schreibe einen Kommentar