ไอคอนช่วยแสดงการกระทำที่ผู้ใช้ทำได้ในแอปพลิเคชัน มีไลบรารีไอคอนหลายแห่ง:
- Font Awesome — https://fontawesome.com/
- Flaticon — https://www.flaticon.com/
- Material Design Icons — https://material.io/resources/icons/
กระบวนการใช้งานคล้ายกันทุกไลบรารี — เรียนรู้หนึ่งที่แล้วใช้อื่นได้
ใช้ Font Awesome ผ่าน CDN
ใส่ <link> ใน <head> ชี้ไปที่ minified CSS file ของ Font Awesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
ตราบใดที่มี CDN นี้ใน <head> จะเข้าถึงไอคอนฟรีเกือบทั้งหมดได้ (มี SVG library อีก แต่ต้องใช้ JavaScript)
การใช้งานไอคอน
<div class="icon-container"> <i class="fab fa-twitter"></i> <span class="fas fa-camera"></span> <span class="fas fa-heart"></span> </div>
- ใช้
<i>หรือ<span>ทั้งคู่ถูกต้อง (<i>ใช้มากกว่า) - เนื้อหาเว้นว่าง — class attribute ดึงไอคอนจาก CSS file
- Class name 2 ส่วน: style prefix + icon name
fab= Font Awesome Brands,fas= Font Awesome Solid (prefix อื่นต้อง PRO)- Icon name รูปแบบ
fa-<name>หาได้จากเว็บ Font Awesome
จัดสไตล์ไอคอน
จัดการไอคอนเหมือน inline elements ด้วย CSS:
.icon-container { font-size: 24px; } .fab { font-size: 3rem; color: #1DA1F1; } .fa-heart { font-size: 4rem; color: crimson; }
ดู docs ของ Font Awesome สำหรับการจัดสไตล์เพิ่มเติม — เข้าใจง่ายและฝึกอ่าน documentation ได้
สรุป
ใช้ CDN ของ Font Awesome (หรือไลบรารีอื่น) ใส่ link ใน head ใช้ class prefix + icon name บน <i> หรือ <span> จัดสไตล์ด้วย CSS เหมือน inline elements
