Giới thiệu về Biểu tượng Google
Biểu tượng cơ bản
Để 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!
Thêm lớp material-icons
vào phần tử nội tuyến và chèn tên của biểu tượng:
Ví dụ
Đoạn mã sau:
<!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" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Kết quả trong:
cloud
cloud
cloud
Hãy tự mình thử » Biểu tượng Google được thiết kế để sử dụng với các phần tử nội tuyến. Phần tử <i>
và <span>
được sử dụng rộng rãi cho các biểu tượng.
Lưu ý: Biểu tượng Material có kích thước mặc định là 24px.
Cũng lưu ý rằng nếu bạn thay đổi màu của vùng chứa biểu tượng thì màu của biểu tượng cũng thay đổi. Điều tương tự cũng xảy ra với bóng và bất kỳ thứ gì khác được kế thừa bằng CSS. Ngoại lệ là thuộc tính kích thước phông chữ CSS, luôn là 24px, trừ khi có quy định khác.
Biểu tượng khá lớn
Mặc dù các biểu tượng vật liệu có thể được chia tỷ lệ thành bất kỳ kích thước nào nhưng kích thước phông chữ được đề xuất là 18, 24, 36 hoặc 48px:
Ví dụ
Đoạn mã sau:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons md-48">cloud</i>
Kết quả trong:
cloud
cloud
cloud
cloud
Hãy tự mình thử »