圖標庫
隨著W3.CSS你可以使用任何的圖標庫，如：
- 字體真棒圖標
- 谷歌圖標材料
- 引導圖標
使用圖標
要使用圖標，只需添加圖標的名稱類的HTML <I>元素。
為了控制圖標的大小，圖標的字體大小屬性的變化，或者使用w3- 尺寸的類：
- W3-微小
- W3小
- W3-大
- W3-xxlarge
- W3-xxxlarge
字體真棒圖標
發發到戶
發發酒吧
發發左箭頭
發發右箭頭
發發搜索
發發閉
發發刷新
發FA-垃圾
發發男性
發發汽車
發發卡車
發發面
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud
w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud
w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud
w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
試一試» 
對於圖標的完整列表： 請訪問我們的圖標參考
谷歌材料設計圖標
家
家
家
菜單
菜單
菜單
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
搜索
搜索
搜索
關
關
關
刷新
刷新
刷新
刪除
刪除
刪除
人
人
人
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i
class="material-icons w3-xlarge">cloud</i>
<i class="material-icons
w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i
class="material-icons w3-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
試一試» 引導圖標
家
菜單漢堡包
arrow_back
arrow_forward
搜索
去掉
刷新
垃圾
用戶
文件
打印
平面
例
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon
glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon
glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud
w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
試一試»