Materialise CSS图标 _MaterializeCSS

Materialize CSS包含来自Google的932个材料设计图标。这些图标可以直接从Material Design规范中下载。
Materialize CSS支持三种类型的图标库：

字体真棒图标
Google Material图标
引导图标

如何使用Materialise CSS图标你必须将图标的名称放在HTML < i> 元素的类中才能使用该图标。
你可以使用以下类来控制图标的大小。

Index	Class name	Description
1)	tiny	它用于绘制很小的图标。 1雷姆。
2)	small	用于绘制小尺寸的图标。 2rem。
3)	medium	用于绘制中等大小的图标。 4雷姆
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.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> < /script> < script src="http://img.readke.com/220501/1J51142G-1.jpg"> < /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.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"> < 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>

立即测试
【Materialise CSS图标】输出