Font-Awesome
Font Awesome có thể được tải tại đây.
Giải nén ra sẽ được thư mục chứa bộ font, bài viết này sẽ để thư mục font cùng cấp với index.html để dễ tích hợp.
Include thư viện
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Font-Awesome</title>
<link rel="stylesheet" type="text/css" href="./fontawesome-free-5.14.0-web/css/all.css" />
<style></style>
</head>
<body>
<i class="fas fa-camera"></i>
</body>
</html>Để thêm font thì phải trỏ tới đường dẫn thư mục font hiện tại href="fontawesome-free-5.14.0-web/css/all.css".
Sử dụng font
Ngay giữa cặp thẻ <body> dùng cặp thẻ <i>. Ví dụ:
<body>
<i class="fas fa-camera"></i>
</body>
Vậy là có thể tạo ra được một icon.
Vì là font chữ nên dung lượng của nó rất gọn nhẹ, có thể đổi màu hoặc tăng kích thước cho icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Font-Awesome</title>
<link rel="stylesheet" type="text/css" href="./fontawesome-free-5.14.0-web/css/all.css" />
</head>
<body>
<span style="font-size: 3rem; color: Tomato">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 3rem; color: Dodgerblue">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 3rem; color: Mediumslateblue">
<i class="fas fa-camera"></i>
</span>
</body>
</html>
Animation
Một điểm mạnh nữa ở bộ font này là có thể tạo hiệu ứng cho icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Font-Awesome</title>
<link rel="stylesheet" type="text/css" href="./fontawesome-free-5.14.0-web/css/all.css" />
</head>
<body>
<span style="font-size: 3rem; color: Tomato">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</span>
</body>
</html>
Mỗi một font có thể linh động tùy biến khác nhau theo người dùng, tùy theo sự sáng tạo của mỗi người mà làm cho trang web thêm sinh động.
