W3.CSS支持以下流行的图标库:
- 字体真棒图标
- Google Material图标
- 引导图标
用法
要使用图标，请将图标的名称放在HTML <i>元素的类中。要控制图标的大小，可以使用以下类-
| 序号 | 类名和描述 |
|---|---|
| 1 | w3-tiny 绘制一个非常小的尺寸的图标。 |
| 2 | w3-small 绘制一个小尺寸的图标。 |
| 3 | w3-large 绘制一个大尺寸的图标。 |
| 4 | w3-xlarge 绘制一个超大尺寸的图标。 |
| 5 | w3-xxlarge 绘制一个非常大的尺寸的图标。 |
| 6 | w3-xxxlarge 绘制一个非常高的超大尺寸的图标。 |
例
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>作者：terry，如若转载，请注明出处：https://www.web176.com/w3css/915.html
