codecamp

W3.CSS Icons (图标)

使用 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>


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


W3.CSS Tags (标签)
W3.CSS Built-In Responsiveness (响应式)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }