Font Awesome 6.0

Đăng bởi: Giang Web – 2022-01-27 10:26:17 – 313 view

Font Awesome là gì? Cách sử dụng Font Awesome

Trong một layout website thường sẽ có những ICON giúp website đẹp và thân thiện hơn, và ngoài ra các ICON đó còn có tác dụng điều hướng người dùng.

Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa ICON đó vào. Tuy nhiên hiện nay chúng ta đã có giải pháp khác đó là sử dụng Symboy Font (font chữ kiểu ký hiệu). Hiện nay có nhiều thư viện Symboy Font nhưng mạnh nhất và hay sử dụng nhất là CSS3 như trong ví dụ mình đã demo ở trên.

Font Awesome hoạt động hầu hết ở các trình duyệt hiện đại hiện hay. Tuy nhiên với các phiên bản cũ IE7 thì nó không hỗ trợ nữa vì IE7 được coi như đã chết.

Nếu bạn sử dụng Bootstrap để xây dựng CSS cho website thì sẽ dễ dàng nhận thấy sự cần thiết của Font Awesome bởi vì chúng kết hợp với nhau khá là tốt và tạo ra các sản phẩm khá là bắt mắt.

2. Điểm mạnh của Font Awesome

Nếu ta sử dụng hình ảnh thì tốc độ load của website sẽ chậm hơn bởi vì ta phải load môt hình ảnh khá là nặng nề. Nhưng với Font Awesome thì ban chỉ cần load một file CSS, một file Font và chỉ load một lần duy nhất nên tốc độ sẽ được cải thiện đáng kể.

Một hình ảnh không thể thay đổi màu, kích thước của chúng được. Riêng với kích thước thì ta có thể sử dụng CSS để thiết lập chiều rộng, chiều cao, nhưng nếu làm như vậy thì chất lượng hình ảnh sẽ bị ảnh hưởng. Nhưng với Font Awesome thì bạn dễ dàng thay đổi kích thước và màu của icon bằng những thuộc tính CSS thông thường của font chữ như color, font-size hay bất kì một thuộc tính CSS nào khác dành cho Font chữ.

Bạn quan tâm =>> Thiết kế website tại Hải Phòng

Cùng chủ đề: =>> Font Awesome 6 Pro Offline

Font Awesome sử dụng linh hoạt giúp lập trình viên không mất quá nhiều thời gian để lấy các icons từ file PSD.

Và còn nhiều điểm mạnh nữa nhưng mình dành cho bạn tự khám phá.

3. Cách sử dụng Font Awesome

 Download Font Awesome và nhúng vào Layout website tại link này