ICON FONT
WHAT THE FONT MAN?!
รูปเล็กไปก็ดูไม่ออก รูปใหญ่ไปก็แตกๆ
ปัญหาของการใช้ icon PNG
WHY MAN?!
ปัญหาของการใช้ icon PNG
ถ้าเราใช้รูปไอคอน 1 รูปต่อ 1 ไฟล์ ก็จะมีปัญหาว่า
ถ้าเรามี 100 ไอคอน ก็ต้องใช้ 100 ไฟล์ การเรียกไฟล์ทีละไฟล์จะทำให้เว็บช้าลง
WHY MAN?!
โหลดช้า แก้ได้
ด้วย CSS Sprite
โหลดช้า แก้ได้
ด้วย CSS Sprite
ICON FONT
ICON FONT?
==>
=
WHAT IS IT?!
ICON FONT?
ใช้ CSS3 Font Face ในการโหลดไฟล์ฟ้อนต์เข้ามาใช้
WHAT IS IT?!
ICON FONT?
T
เหมือนใส่ตัวหนังสือ 1 ตัว
สามารถใช้ CSS ตกแต่งได้ตามสะดวก
WHAT IS IT?!
FONT AWESOME
WHAT A PRETTY THING!
● อยู่ใน Bootstrap ตั้งแต่ V2.x
● มีไอคอนทั้งหมด 300+ ให้เลือกใช้ และยังเพิ่มขึ้นเรื่อยๆ
● ซัพพอร์ทตั้งแต่ IE7 ขึ้นไป
PUT IT
TO MY SITE
MAN!!!
PUT IT TO MY SITE
2 ใส่ HTML ใน <head> ตามนี้
โดยในส่วนของ path/to/font-awesome/css/font-awesome.min.css
ให้แก้เป็น path ไปโฟลเดอร์ที่เราใส่ Font Awesome ไว้
USE IT ON MY SITE
1 ดูไอคอนทั้งหมดที่อยู่ใน หน้ารวม Icon ของ Font Awesome
เลือกไอคอนที่อยากใช้มา 1 ตัว
USE IT ON MY SITE
2 ดูชื่อ class ที่ด้านล่างรูปไอคอน
ในตัวอย่างเขียนว่า fa-forumbee
USE IT ON MY SITE
จะเห็นว่าต้องมีคลาส fa ด้วยทุกครั้งเพื่อบอกว่าจะใช้ Font Awesome
3 เรียกใช้โดยใส่โค้ดตามนี้
USE IT ON MY SITE
fa-lg, fa-2x, fa-3x, fa-4x, fa-5x เข้าไป (ไล่จากใหญ่น้อย ไปถึงใหญ่มาก)
4 เราสามารถใช้ไอคอนขนาดใหญ่กว่าปกติก็ได้
ด้วยการเพิ่มคลาส
ทำใช้เองก็ได้ ดี๊ย์ดีย์
USE IT ON MY SITE
2 ใส่ HTML ใน <head> ตามนี้
PUT IT TO MY SITE
2 ใส่ HTML ใน <head> ตามนี้