W3.CSS 圖示
圖示庫
您可以使用任何您喜歡的圖示庫，例如：
- Font Awesome 圖示
- Google Material Design 圖示
- Bootstrap 圖示
使用圖示庫
插入圖示
- 在 <head> 部分包含一個 CDN（內容分發網路）中的圖示庫。
- 將圖示類的名稱新增到任何內聯 HTML 元素中。
提示： <i> 和 <span> 元素常用於新增圖示。
要控制圖示的大小，請更改圖示的 font-size 屬性，或使用其中一個 w3-size 類。
- w3-tiny
- w3-small
- w3-large
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
一些 Font Awesome 圖示
fa fa-home
fa fa-bars
fa fa-arrow-left
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-truck
fa fa-plane
示例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
</html>
自己試試 »
有關完整的圖示列表：訪問我們的圖示參考
一些 Google Material Design 圖示
主頁
主頁
主頁
選單
選單
選單
向後箭頭
向後箭頭
向後箭頭
向前箭頭
向前箭頭
向前箭頭
search
search
search
關閉
關閉
關閉
重新整理
重新整理
重新整理
刪除
刪除
刪除
人物
人物
人物
汽車方向
汽車方向
汽車方向
當地運輸
當地運輸
當地運輸
當地機場
當地機場
當地機場
示例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>
</html>
自己試試 »
一些 Bootstrap 圖示
主頁
menu-hamburger
向後箭頭
向前箭頭
search
移除
重新整理
trash
user
file
列印
plane
示例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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>
</html>
自己試試 »
