ห้องสมุดไอคอน
ด้วย W3.CSS คุณสามารถใช้ห้องสมุดไอคอนใด ๆ เช่น:
- ไอคอนน่ากลัวตัวอักษร
- ไอคอนวัสดุของ Google
- ไอคอนบูต
ใช้ไอคอน
หากต้องการใช้ไอคอนเพียงแค่เพิ่มชื่อของไอคอนในชั้นเรียนของ HTML <i> องค์ประกอบ
เพื่อควบคุมขนาดของไอคอนเปลี่ยน font-size ทรัพย์สินของไอคอนหรือใช้ชั้นเรียนขนาด w3-:
- W3 เล็ก ๆ
- W3 ขนาดเล็ก
- W3 ขนาดใหญ่
- W3-xxlarge
- W3-XXXLarge
ไอคอนน่ากลัวตัวอักษร
เอฟเอเอฟเอคับ้าน
เอฟเอเอฟเอคับาร์
เอฟเอเอฟเอคัลูกศรซ้าย
เอฟเอเอฟเอคัลูกศรขวา
เอฟเอเอฟเอคัค้นหา
เอฟเอเอฟเออย่างใกล้ชิด
เอฟเอเอฟเอรีเฟรช
เอฟเอเอฟเอคัถังขยะ
เอฟเอเอฟเอชาย
เอฟเอเอฟเอคัรถยนต์
เอฟเอเอฟเอรถบรรทุก
เอฟเอเอฟเอคัเครื่องบิน
ตัวอย่าง
<!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>
ลองตัวเอง» 
สำหรับรายการที่สมบูรณ์ของไอคอน: เยี่ยมชมการอ้างอิงไอคอนของเรา
ไอคอนการออกแบบของ Google วัสดุ
บ้าน
บ้าน
บ้าน
เมนู
เมนู
เมนู
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>
ลองตัวเอง»