Share Sử dụng biểu tượng đẹp mắt với thư viện Font Awesome

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Gần như 100% các website đều sử dụng các biểu tượng trong thiết kế giao diện website. Với lợi thế thể hiện trực quan nên các biểu tượng đã trở thành một phần không thể thiếu của một website. Trước đây, phần lớn các biểu tượng được tạo ra từ các hình ảnh khá nặng nề và không linh hoạt trong việc định dạng màu sắc, kích thước. Với sự phát triển của công nghệ web hiện nay, các biểu tượng đã trở nên linh hoạt hơn trong việc sử dụng, tất cả như những phông chữ nên các bạn có thể định dạng tự do về màu sắc, kích thước...

Một trong những thư viện nổi tiếng về biểu tượng kiểu này phải kể đến đó là Font Awesome. Thư viện Font Awesome được sử dụng rất nhiều trên các website bởi nó cung cấp rất nhiều các biểu tượng với nhiều chủ đề khác nhau và đặc biệt Font Awesome là một thư viện mã nguồn mở nên sự phổ biến của nó càng rộng hơn.

Nếu các bạn sử dụng hình ảnh như trước đây thì tốc độ tải của website sẽ chậm hơn bởi vì website phải tải hình ảnh khá là nặng nề. Nhưng với Font Awesome thì website chỉ cần tải một tập tin CSS, một tập tin phông chữ và chỉ tải một lần duy nhất nên tốc độ sẽ được cải thiện đáng kể. Điểm mạnh quan trọng nhất của Font Awesome đó chính là khả năng định dạng màu sắc, kích thước giúp cho việc thiết kế giao diện website trở nên thuận tiện và nhanh chóng hơn rất nhiều.

Để sử dụng thư viện Font Awesome, các bạn tải thư viện tại địa chỉ https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself.

Các bạn tích hợp vào website với dòng mã lệnh như sau:
HTML:
<link href="path/to/all.css" rel="stylesheet">
Trường hợp các bạn sử dụng SVG, các bạn sẽ phải tích hợp thêm tập tin JavaScript với nội dung mã lệnh như sau:
HTML:
<script src="path/to/all.js"></script>
Và sử dụng các biểu tượng của Font Awesome như ví dụ sau:
HTML:
<i class="fas fa-allergies"></i>
<i class="fas fa-ambulance"></i>
<i class="fas fa-user"></i>
Các bạn có thể xem danh sách các biểu tượng được cung cấp miễn phí tại địa chỉ https://fontawesome.com/icons?d=gallery&m=free và xem thêm tài liệu hướng dẫn sử dụng thư viện Font Awesome tại địa chỉ https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use.
 
Back
Top