W3.CSS Icons (圖標(biāo))

2020-12-01 10:27 更新

使用 W3.CSS，您可以使用喜歡的圖標(biāo)庫(kù)，例如：

  • 字體很棒的圖標(biāo)

  • 谷歌材料設(shè)計(jì)圖標(biāo)

  • 引導(dǎo)圖標(biāo)

使用圖標(biāo)庫(kù)

插入圖標(biāo)：

  1. 在 <head> 部分中包含 CDN（內(nèi)容交付網(wǎng)絡(luò)）中的圖標(biāo)庫(kù)。
  2. 將圖標(biāo)類的名稱添加到任何內(nèi)聯(lián) HTML 元素中。

提示： <i> 和 <span> 元素廣泛用于添加圖標(biāo)。

若要控制圖標(biāo)的大小，請(qǐng)更改圖標(biāo)的 font-size 屬性，或使用 w3-size 類之一：

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo

一些字體很棒的圖標(biāo)

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

一些谷歌材料設(shè)計(jì)圖標(biāo)

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

一些引導(dǎo)圖標(biāo)

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)