W3.CSS Icons (图标)

2020-12-01 10:27 更新

使用 W3.CSS,您可以使用喜欢的图标库,例如:

  • 字体很棒的图标

  • 谷歌材料设计图标

  • 引导图标

使用图标库

插入图标:

  1. 在 <head> 部分中包含 CDN(内容交付网络)中的图标库。
  2. 将图标类的名称添加到任何内联 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>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号