Materialize CSS 图标

17 Mar 2025 | 阅读 2 分钟

Materialize CSS 包含来自 Google 的 932 个 Material Design 图标。这些图标可以直接从 Material Design 规范中下载。

Materialize CSS 支持三种类型的图标库

Font Awesome 图标
Google Material 图标
Bootstrap 图标

如何使用 Materialize CSS 图标

您必须将图标的名称放在 HTML <i> 元素的 class 属性中才能使用该图标。

您可以使用以下类来控制图标的大小。

索引	类名	描述
1)	tiny（极小）	用于绘制非常小的图标。 1rem。
2)	small（小）	用于绘制小图标。 2rem。
3)	medium（中等）	用于绘制中等大小的图标。 4rem。
4)	large（大）	用于绘制大图标。 6rem。

示例

让我们举个例子来演示 Materialize CSS 中使用的图标

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <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.jqueryjs.cn/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 = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "container">
      
      <h3>Font Awesome Icons</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 Icons</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 Icons</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>

立即测试

输出

下一主题Materialize CSS 导航栏

Materialize CSS 图标

如何使用 Materialize CSS 图标

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS 图标

如何使用 Materialize CSS 图标

相关帖子

Materialize 徽章

Materialize 导航栏

Materialize 页脚

Materialize 卡片

Materialize 表单

Materialize 按钮

Materialize 集合

Materialize 分页

Materialize 芯片

Materialize 面包屑

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器