Việc chèn các biểu tượng vào website đã trở nên rất phổ biến. Có nhiều thư viện hỗ trợ với nhiều cách tiếp cận khác nhau. Font awesome là thư viện chèn icon vào website với cách tiếp cận của font chữ, nghĩa là xem các biểu tượng như các ký tự. Từ đó chúng ta có thể thay đổi màu sắc, kích thước và hiệu ứng cho icon.
Cùng Tủ Tri Thức xem qua cách áp dụng thư viện font awesome để tạo icon cho website.
Tải và tích hợp thư viện font awesome
Truy cập trang web fontawesome.com và làm theo các bước như hình dưới để tải về phiên bản mới nhất
Tải và giải nén chúng ta sẽ được thư mục như hình sau:
Trong thư mục css, chúng ta có file all.css, đây là file mà chúng ta sẽ tiến hành nhúng vào file html như sau:
Tiến hành nhúng file css/all.css vào html như sau:
<head>
<title>Sử dụng thư viện font awesome chèn icon vào website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/fontawesome/css/all.css" rel="stylesheet" type="text/css"/>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>Lưu ý đường dẫn tới file all.css sao cho đúng với dự án hiện tại của các bạn.
Tạo icon bằng thư viện font awesome
Tìm kiếm icon bằng cách truy cập vào thư viện icon của font awesome như sau:
Điền tên icon theo ý muốn, nhấn vào kết quả để xem code nhúng icon như bên hình dưới:
Copy code nhúng và dán vào bất cứ vị trí nào trong nội dung thẻ body, nơi mà chúng ta muốn hiển thị icon
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Sử dụng thư viện font awesome</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/fontawesome/css/all.css" rel="stylesheet" type="text/css"/>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Hình mặt cười
<i class="fas fa-smile"></i>
</body>
</html>
Cập nhật thư viện font awesome
Thư viện font awesome sẽ thường xuyên được cập nhật để có thêm những icon mới. Để tiến hành sử dụng bản cập nhật, chúng ta thực hiện tải về và ghi đè lên thư mục font awesome đang có. Thông thường, khi này các icon cũ vẫn sẽ được giữ nguyên hoặc có chút thay đổi nhưng ý nghĩa vẫn vậy, ví dụ hình mặt cười thì vẫn là hình mặt cười, nhưng cười theo cách khác đi.
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Hướng dẫn sử dụng font awesome tạo icon cho website