Biểu tượng CSS là gì?
Các biểu tượng có trong thư viện vectơ có thể mở rộng có thể được tùy chỉnh bằng CSS
Các thư viện phổ biến là:
- Biểu tượng phông chữ tuyệt vời
- Biểu tượng Bootstrap
- Các biểu tượng của Google
Làm thế nào để?
Để sử dụng các biểu tượng, chỉ cần thêm một liên kết đến thư viện biểu tượng trong
<head>phần của trang HTML của bạn:
Không cần tải xuống hoặc cài đặt!
Để chèn một 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 dòng 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>
Để có danh sách đầy đủ các biểu tượng (Font Awesome, Bootstrap và Google), hãy truy cập Tham chiếu biểu tượng của W3School .
Ví dụ về Bootstrap
<!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>
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ướng dẫn đầy đủ về biểu tượng
Đây là một mô tả ngắn về các Biểu tượng.
Để có hướng dẫn đầy đủ về biểu tượng, hãy truy cập Hướng dẫn về biểu tượng của W3Schools .
Để có tài liệu tham khảo đầy đủ về Biểu tượng, hãy truy cập vào Tài liệu tham khảo về biểu tượng của W3Schools .