Responsywny rozmiar czcionki Niesamowite ikony

Question

Używam ikon FontAwesome na mojej responsywnej stronie internetowej Bootstrap i chcę wyświetlać ikony o różnych rozmiarach w zależności od rozdzielczości ekranu.

Idealnie chciałbym wyświetlić czcionki niesamowite ikony za pomocą procent szerokości pojemnika, tj. 50% szerokości, więc skalują się w górę iw dół. Wiem, że prawdopodobnie mógłbym to zrobić po prostu używając ikon svg, ale chciałem użyć FontAwesome, ponieważ używam go w innym miejscu mojej witryny.

Rozumiem, że możesz określić rozmiar używając klas, tj. Fa-lg lub fa-2x. Czy najlepszym rozwiązaniem byłoby użycie klas Bootstrap, aby ukryć i wyświetlić różne rozmiary w zależności od rozdzielczości ekranu, czy też możesz automatycznie skalować ikony za pomocą wartości procentowej?

Answer 1

Tak, najlepszym sposobem jest zdefiniowanie CSS dając glyphicon się rozmiar czcionki do swoich potrzeb:

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

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

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

Ale jeśli chcesz ją dostosować pod względem wielkości ekranu, można mieć tylko jedną klasę CSS i modyfikować w trakcie realizacji z CSS @media rule, aby uzyskać pożądane rezultaty:

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

To oczyścić swój kod i trzeba będzie naprawdę ładne rezultaty przy minimalnym wysiłku kodowania;)

Answer 2

trzeba zobaczyć tę odpowiedź:

Font scaling based on width of container

używać jednostek "vw" na font-size. Sprawdź także tabelę wsparcia przeglądarki, która jest tam wymieniona - jest całkiem niezła.

Pozdrawiam!

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