ไอคอน W3.CSS
ห้องสมุดไอคอน
ด้วย W3.CSS คุณสามารถใช้ไลบรารีไอคอนที่คุณต้องการ เช่น:
- Font Awesome Icon
- ไอคอนการออกแบบวัสดุของ Google
- ไอคอน Bootstrap
การใช้ไลบรารีไอคอน
ในการแทรกไอคอน:
- รวมไลบรารีไอคอนจาก CDN (เครือข่ายการจัดส่งเนื้อหา) ในส่วน <head>
- เพิ่มชื่อของคลาสไอคอนให้กับองค์ประกอบ HTML แบบอินไลน์ใดๆ
เคล็ดลับ:องค์ประกอบ <i> และ <span> ใช้กันอย่างแพร่หลายในการเพิ่มไอคอน
ในการควบคุมขนาดของไอคอน ให้เปลี่ยนคุณสมบัติขนาดฟอนต์ของไอคอน หรือใช้หนึ่งใน คลาส ขนาด w3- :
- w3-tiny
- w3-เล็ก
- w3-ขนาดใหญ่
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
ไอคอนแบบอักษรบางตัว
ฟ้า ฟ้าโฮม
fa-bars
ฟ้าฟา-ลูกศรซ้าย
ฟ้าฟา-ลูกศรขวา
ฟ้าฝ่าเสิร์ช
ฟ้าฟา-ปิด
ฟ้าฟารีเฟรช
ฟ้าฟา-ถังขยะ
เจ็บ
ฟ้าฟาคาร์
ฟ้า-รถบรรทุก
ฟ้าฟาเครื่องบิน
ตัวอย่าง
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/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 บางส่วน
บ้าน
บ้าน
บ้าน
เมนู
เมนู
เมนู
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
ค้นหา
ค้นหา
ค้นหา
ปิด
ปิด
ปิด
รีเฟรช
รีเฟรช
รีเฟรช
ลบ
ลบ
ลบ
บุคคล
บุคคล
บุคคล
เส้นทาง_รถ
เส้นทาง_รถ
เส้นทาง_รถ
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="https://www.w3schools.com/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 บางตัว
บ้าน
เมนูแฮมเบอร์เกอร์
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="https://www.w3schools.com/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>