W3.CSS - Biểu tượng

W3.CSS 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 không.	Tên & Mô tả Lớp học
1	w3-tiny Vẽ một biểu tượng có kích thước rất nhỏ.
2	w3-small Vẽ một biểu tượng có kích thước nhỏ.
3	w3-large Vẽ một biểu tượng có kích thước lớn.
4	w3-xlarge Vẽ một biểu tượng có kích thước cực lớn.
5	w3-xxlarge Vẽ một biểu tượng có kích thước rất lớn.
6	w3-xxxlarge Vẽ một biểu tượng có kích thước cực lớn rất cao.

Thí dụ

w3css_icons.htm

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

Kết quả

Xác minh kết quả.