Phông chữ kích thước đáp ứng Biểu tượng tuyệt vời

Question

Tôi đang sử dụng các biểu tượng FontAwesome trong trang web đáp ứng Bootstrap của mình và muốn hiển thị biểu tượng ở các kích thước khác nhau tùy thuộc vào độ phân giải màn hình.

Lý tưởng nhất là tôi muốn hiển thị các biểu tượng phông chữ tuyệt vời bằng cách sử dụng phần trăm chiều rộng vùng chứa, tức là 50% chiều rộng, do đó chúng co giãn lên và xuống. Tôi biết rằng tôi có thể làm điều này chỉ bằng cách sử dụng các biểu tượng svg, nhưng tôi muốn sử dụng FontAwesome, vì tôi đang sử dụng nó ở nơi khác trong trang web của mình.

Tôi hiểu rằng bạn có thể chỉ định kích thước bằng cách sử dụng các lớp, tức là fa-lg hoặc fa-2x. Giải pháp tốt nhất là sử dụng các lớp học Bootstrap để ẩn và hiển thị các kích thước khác nhau tùy thuộc vào độ phân giải màn hình hay bạn có thể nhận các biểu tượng tự động chia tỷ lệ bằng phần trăm không?

Answer 1

Vâng, cách tốt nhất là định nghĩa CSS cho các glyphicon một font-size theo ý thích của bạn:

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

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

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

Nhưng, nếu bạn muốn điều chỉnh nó bằng cách kích thước màn hình, bạn có thể chỉ có một lớp CSS và sửa đổi nó trong quá trình thực với CSS @media rule để có được kết quả mong muốn:

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

này sẽ làm sạch mã của bạn và bạn sẽ có kết quả thực sự tốt đẹp với công sức viết mã tối thiểu;)

Answer 2

bạn có để xem câu trả lời này:

Font scaling based on width of container

Sử dụng "vw" đơn vị trên font-size. Ngoài ra kiểm tra bảng hỗ trợ trình duyệt được đề cập ở đó - nó khá tốt.

Chúc mừng!

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