W3.CSS Icons (圖標)

2020-12-01 10:27 更新

使用 W3.CSS，您可以使用喜歡的圖標庫，例如：

  • 字體很棒的圖標

  • 谷歌材料設計圖標

  • 引導圖標

使用圖標庫

插入圖標：

  1. 在 <head> 部分中包含 CDN（內容交付網絡）中的圖標庫。
  2. 將圖標類的名稱添加到任何內聯(lián) 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

公眾號
微信公眾號

編程獅公眾號