Biểu tượng CSS là gì?
Các biểu tượng có trong thư viện vectơ có thể mở rộng và có thể tùy chỉnh bằng CSS
Các thư viện phổ biến là:
- Phông chữ Biểu tượng tuyệt vời
- Biểu tượng Bootstrap
- Biểu tượng Google
Làm cách nào để?
Để sử dụng biểu tượng, chỉ cần thêm liên kết đến thư viện biểu tượng vào phần <head>
trên trang HTML của bạn:
Không cần tải xuống hoặc cài đặt!
Để chèn biểu tượng, hãy thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nội tuyến nào như <i>
hoặc <span>
.
Ví dụ về phông chữ tuyệt vời
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa
fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Hãy tự mình thử »Để có danh sách đầy đủ các biểu tượng (Font Awesome, Bootstrap và Google), hãy truy cập Tham khảo biểu tượng của W3School.
Ví dụ khởi động
<!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>
Hãy tự mình thử »Ví dụ về Google
<!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>
Hãy tự mình thử »Hướng dẫn biểu tượng đầy đủ
Đây là mô tả ngắn gọn về Biểu tượng.
Để có hướng dẫn đầy đủ về Biểu tượng, hãy truy cập Hướng dẫn Biểu tượng W3Schools .
Để có tài liệu tham khảo Biểu tượng đầy đủ, hãy truy cập Tài liệu tham khảo Biểu tượng W3Schools .