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ỳ phần tử 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, 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.)
Biểu tượng phông chữ 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 <head>phần của 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 Font Awesome 5 của chúng tôi .
Lưu ý: Không cần tải xuống hoặc cài đặt!
Thí 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 các glyphicons Bootstrap, hãy thêm dòng sau vào trong <head>phần của 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!
Thí 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ả:
Các biểu tượng của Google
Để sử dụng các biểu tượng của Google, hãy thêm dòng sau vào trong <head>phần của 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!
Thí 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ả:
Để có danh sách đầy đủ tất cả các biểu tượng, hãy truy cập Hướng dẫn về biểu tượng của chúng tôi .