W3.CSS Icons (图标)
使用 W3.CSS,您可以使用喜欢的图标库,例如:
-
字体很棒的图标
-
谷歌材料设计图标
- 引导图标
使用图标库
插入图标:
- 在 <head> 部分中包含 CDN(内容交付网络)中的图标库。
- 将图标类的名称添加到任何内联 HTML 元素中。
提示: <i> 和 <span> 元素广泛用于添加图标。
若要控制图标的大小,请更改图标的 font-size 属性,或使用 w3-size 类之一:
- w3-tiny
- w3-small
- w3-large
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
一些字体很棒的图标
实例
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
尝试一下 »
点击“尝试一下”按钮查看在线实例
一些谷歌材料设计图标
实例
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
尝试一下 »
点击“尝试一下”按钮查看在线实例
一些引导图标
实例
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
尝试一下 »
点击“尝试一下”按钮查看在线实例