Biểu tượng vật liệu

Google cung cấp một bộ gồm 750 biểu tượng được thiết kế theo "nguyên tắc thiết kế material design" và chúng được gọi là Material Designcác biểu tượng. Các biểu tượng này rất đơn giản và chúng hỗ trợ tất cả các trình duyệt web hiện đại. Vì các biểu tượng này dựa trên vector nên chúng cũng có thể mở rộng. Để sử dụng các biểu tượng này, chúng ta phải tải phông chữ (thư viện)material-icons.

Đang tải Phông chữ (thư viện)

Để tải thư viện material-icon, hãy sao chép và dán dòng sau vào phần <head> của trang web.

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

Sử dụng biểu tượng

Biểu tượng Vật liệu của Google cung cấp một danh sách dài các biểu tượng. Chọn bất kỳ một trong số chúng và thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nào trong thẻ <body>. Trong ví dụ sau, chúng tôi đã sử dụng biểu tượng có tênaccessibility thuộc thể loại hành động.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Nó sẽ tạo ra kết quả sau:

Xác định kích thước

Bạn có thể tăng hoặc giảm kích thước của một biểu tượng bằng cách xác định kích thước của nó trong CSS và sử dụng nó cùng với tên lớp như hình dưới đây. Trong ví dụ sau, chúng tôi đã khai báo kích thước là 6 em.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Nó sẽ tạo ra kết quả sau:

Xác định màu sắc

Bạn có thể sử dụng CSS để xác định màu sắc của biểu tượng. Ví dụ sau đây cho thấy cách bạn có thể thay đổi màu của một biểu tượng được gọi làaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Nó sẽ tạo ra kết quả sau:

Danh sách các loại

Phông chữ Material Icons của Google cung cấp 519 biểu tượng trong các danh mục sau:

Biểu tượng hành động
Biểu tượng cảnh báo
Biểu tượng AV
Biểu tượng giao tiếp
Biểu tượng nội dung
Biểu tượng thiết bị
Biểu tượng biên tập viên
Biểu tượng tệp
Biểu tượng phần cứng
Biểu tượng hình ảnh
Biểu tượng bản đồ
Biểu tượng điều hướng
Biểu tượng thông báo
Biểu tượng xã hội
Chuyển đổi các biểu tượng

Để sử dụng bất kỳ biểu tượng nào trong số các biểu tượng này, bạn phải thay thế tên lớp trong các chương trình được cung cấp trong chương này bằng tên lớp của biểu tượng mong muốn. Trong các chương tiếp theo của Đơn vị này (Biểu tượng Vật liệu), chúng tôi đã giải thích theo thể loại cách sử dụng và kết quả đầu ra tương ứng của các Biểu tượng Vật liệu khác nhau.