Materialize - Biểu tượng

Materialize hỗ trợ các thư viện biểu tượng phổ biến sau:

Biểu tượng phông chữ tuyệt vời
Biểu tượng tài liệu của Google
Biểu tượng Bootstrap

Sử dụng

Để sử dụng một biểu tượng, hãy đặt tên của biểu tượng đó trong lớp của một phần tử <i> HTML. Để kiểm soát kích thước của một biểu tượng, bạn có thể sử dụng các lớp sau:

Sr.No.	Tên & Mô tả Lớp học
1	tiny Vẽ một biểu tượng có kích thước rất nhỏ. 1 hậu cung.
2	small Vẽ một biểu tượng có kích thước nhỏ. 2 hậu cung.
3	medium Vẽ một biểu tượng có kích thước trung bình. 4 hậu cung.
4	large Vẽ một biểu tượng có kích thước lớn. 6 hậu cung.

Thí dụ

materialize_icons.htm

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "container"> 
      <h2>Icons Demo</h2>
      <hr/>
      
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud tiny"></i>
      <i class = "fa fa-cloud"></i>	  
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud medium"></i>
      <i class = "fa fa-cloud large"></i>     
      
      <h3>Google Material Design Icon Demo</h3>	  
      <i class = "material-icons tiny">cloud</i>
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons medium">cloud</i>
      <i class = "material-icons large">cloud</i>      
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud tiny"></i>
      <i class = "glyphicon glyphicon-cloud"></i>      
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud medium"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>      
   </body>  
</html>

Kết quả

Xác minh kết quả.