Biểu tượng CSS
Các biểu tượng có thể dễ dàng được thêm vào trang HTML của bạn bằng cách sử dụng thư viện biểu tượng.
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, chẳng hạn như Font Awesome.
Thêm tên của lớp biểu tượng được chỉ định vào bất kỳ thành phần HTML nội tuyến nào (như <i>
hoặc <span>
).
Tất cả các biểu tượng trong thư viện biểu tượng bên dưới đều là các vectơ có thể mở rộng và có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v.)
Phông chữ Biểu tượng tuyệt vời
Để sử dụng các biểu tượng Font Awesome, hãy truy cập fontawesome.com , đăng nhập và nhận mã để thêm vào phần <head>
trên trang HTML của bạn:
<script src="https://kit.fontawesome.com/ yourcode .js" crossorigin="anonymous"></script>
Đọc thêm về cách bắt đầu với Font Awesome trong hướng dẫn về Font Awesome 5 của chúng tôi.
Lưu ý: Không cần tải xuống hoặc cài đặt!
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></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ả:
Để có tài liệu tham khảo đầy đủ về tất cả các biểu tượng Font Awesome, hãy truy cập Tham khảo Biểu tượng của chúng tôi.
Biểu tượng Bootstrap
Để sử dụng glyphicons Bootstrap, hãy thêm dòng sau vào phần <head>
trên 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!
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ả:
Hãy tự mình thử »Biểu tượng Google
Để sử dụng các biểu tượng Google, hãy thêm dòng sau vào bên trong phần <head>
trên 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!
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ả:
Hãy tự mình thử »Để có danh sách đầy đủ tất cả các biểu tượng, hãy truy cập Hướng dẫn biểu tượng của chúng tôi.