Bài 14: CSS Icons (Thêm biểu tượng vào trang web)
Cách thêm biểu tượng
Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng (icon), chẳng hạn như Font Awesome.
Thêm tên của biểu tượng mong muốn vào phần tử HTML nội dòng (inline HTML). Như <i> hoặc <span>.
Tất cả các biểu tượng trong các thư viện biểu tượng này có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, độ bóng, v.v.)
Thư viện Font Awesome
Để sử dụng các biểu tượng của thư viện Font Awesome, hãy truy cập fontawesome.com , đăng nhập và nhận mã để thêm vào phần<head> của trang html của bạn.
<script src="https://kit.fontawesome.com/yourcode.js"></script>Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
Kết quả:
Biểu tượng Bootstrap
Để sử dụng glyphicons Bootstrap, hãy thêm dòng sau vào phần<head> trong trang HTML của bạn:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
Kết quả:
Biểu tượng Google
Để sử dụng các biểu tượng của Google, hãy thêm dòng sau vào phần<head>trong trang HTML của bạn:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm!
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Kết quả:
