FONT ICON
ลองเปลี่ยนมาใช้ FONT ICON สิง่ายกว่ากันเยอะ
ก่อนจะมาเป็น FONT ICON
เรื่องมีอยู่ว่า ตั้งแต่อดีตอันยาวนาน เมื่อต้องการใส่ Icon ในหน้าเว็บ เหล่านักพัฒนาก็จะนำไฟล์รูป .png มาใช้งาน ปัญหาที่ตามมาในช่วงแรกนั้น คือเมื่อหน้าเว็บมีการเรียกใช้งาน Icon หลายๆไฟล์ส่งผลกับ Performance ในการโหลดหน้าเว็บ (ในสมัยนั้นอินเทอร์เน็ตไม่ได้เร็วเหมือนในปัจจุบัน) ทำให้เหล่านักพัฒนาได้หาวิธีแก้ปัญหา จนมาเจอวิธีแก้ด้วยการรวม Icon ทุกๆไฟล์ไว้ในไฟล์เดียวแล้วเรียกใช้งาน ผ่านคำสั่ง CSS Background แล้วกำหนดขนาดและตำแหน่งของ Icon นั้นๆในไฟล์ที่รวม Icon ทุกตัวไว้ ตัวอย่างการใช้รูปแบบนี้เช่น jQuery UI Framework
//ตัวอย่างคำสั่ง CSS เรียกใช้งาน Icon.ui-icon-caret-1-n{
width: 16px;
width: 16px;
background-position: 0 0;
background-image: url(icon_all.png);
}
เมื่อแก้ปัญหา Performance ในการโหลดหน้าเว็บได้ ไม่วายปัญหาใหม่ก็ตามมา เมื่อมีเทคโนโลยี Retina Display เข้ามาทำให้ Icon ที่ใช้อยู่ เมื่อใช้บนหน้าจอที่มีความละเอียดสูงเกิดปัญหาภาพแตก ทำให้นักพัฒนาต้องทำไฟล์ภาพชุด Icon เพิ่มมาอีกหนึ่งชุดที่มีขนาดใหญ่กว่าแบบเดิม 2 เท่า เพื่อมาเรียกใช้งาน Icon ชุดนี้ เมื่อมีการใช้งานบนหน้าจอที่มีความละเอียดสูง เห็นได้ว่าวิธีการแก้ปัญหานี้เป็นการเพิ่มงานให้กับเหล่านักพัฒนา และเมื่อเกิดการปรับแก้ Icon ทำได้ยาก จึงมีวิธีแก้ปัญหาใหม่เกิดขึ้น ที่เรียกว่า Font Icon
FONT ICON คืออะไร
Font Icon ก็เป็นฟอนต์ที่เราใช้ๆงานทั่วไป ความสามารถไม่ต่างอะไรจากฟอนต์ที่เราใช้งาน สามารถย่อ ขยาย แล้วไม่แตก เพราะมันเป็น Vector สามาถใช้งานได้กับทุกความละเอียดหน้าจอ ไม่ต้องมาทำชุด Icon เป็นสองชุดอีกต่อไป นอกจากนั้น การเรียกใช้งานก็เป็นการเรียกไฟล์เดียว ตัดปัญหา Performance ในการโหลดหน้าเว็บ ยิ่งไปกว่านั้น อย่างที่ได้บอกไปว่า Font Icon ก็เป็นฟอนต์ทั่วไป คำสั่ง CSS ที่สมารถใช้งานอะไรกับฟอนต์ได้ ก็ใช้งานกับ Font Icon ได้เช่นกัน อาทิเช่น color, font-size, text-shadow จะปรับแต่งยังไงตามใจชอบได้เลย
การใช้งาน FONT ICON
การใช้งาน Font Icon ผมแบ่งออกเป็นสองวิธีคือ 1.การทำ Icon ขึ้นมาเองแล้วนำไปสร้างเป็นไฟล์ Font กับ 2.ใช้งาน Font Icon ที่มีทีมพัฒนาทำไว้แล้ว ในบทความนี้เราจะเลือกใช้วิธีที่2 โดยจะเลือกใช้งาน Font Icon ของ fontawesome ไปเริ่มกันเลยครับ
- เข้าไปที่เว็บ http://fontawesome.io แล้วทำการดาวน์โหลด
- เมื่อดาวน์โหลดเสร็จก็จะได้ไฟล์มาตามรูป
- ในไฟล์ html ในส่วน <head> ให้เราใส่
<link rel="stylesheet" href="path/font-awesome/css/font-awesome.min.css">โดย path ให้แก้ตามโฟลเดอร์ที่เราใส่ Font Awesome ไว้ - ในส่วนของการเรียกใช้ ให้เราเข้าไปที่ http://fontawesome.io/icons จะเห็น Icon มากมายให้เราเลือกใช้งาน
- เราอยากใช้ Icon ตัวไหนก็แค่ใส่ชื่อ Icon ที่เราเลือกไปใน class ตามตัวอย่าง
// - ต้องใส่ class fa ทุกครั้งเพื่อบอกว่าจะใช้ fontawesome
// - แล้วตามด้วยชื่อของ Icon ที่เราต้องการใช้งาน<i class="fa fa-address-book"></i>
- นอกจากนี้ fontawesome ยังสามารถกำหนดขนาด Icon ด้วยการเพิ่ม class fa-lg, fa-2x, fa-3x, fa-4x, fa-5x ไล่จากเล็กไปใหญ่
// - เพิ่ม class fa-lg, fa-2x, fa-3x, fa-4x, fa-5x เป็นการกำหนดขนาด<i class="fa fa-address-book fa-lg"></i>
<i class="fa fa-address-book fa-2x"></i>
<i class="fa fa-address-book fa-3x"></i>
<i class="fa fa-address-book fa-4x"></i>
<i class="fa fa-address-book fa-5x"></i>
- หากเราไม่ต้องการขนาดตามที่ fontawesome มีให้ เราสามารถกำหนดได้ตามที่ต้องการ และปรับแต่ง Icon นั้นด้วยคำสั่ง CSS เพิ่มเติมได้
// HTML File
<i class="fa fa-address-book"></i>// CSS File
.fa-address-book{
color:red;
font-size: 18px;
text-shadow: 1px 1px 1px #000;
}
จากตัวอย่างจะเห็นได้ว่าการที่เราเปลี่ยนมาใช้งาน Font Icon มันช่วยเราทำงานได้ง่ายขึ้น การปรับแก้ก็สะดวกขึ้นเยอะ มันช่างเป็นอะไรที่ดีมากเลย แต่ในมุมมองของผมมันก็ยังมีข้อเสียนะ ตัวอย่างเช่น ถ้าเราต้องการ Icon ที่มีมากกว่าหนึ่งสีอยู่ใน Icon ละจะทำอย่างไร นั้นนะสิจะทำอย่างไร คำตอบคือ ในตอนนี้มันยังทำไม่ได้ถ้ามันยังอยู่ในรูปแบบของ Font ถ้าต้องการแบบนั้นเราอาจจะต้องเปลี่ยนไปใช้งาน Icon ในรูปแบบ SVG ไฟล์แทน ในส่วนนี้จะเขียนอธิบายในบทความถัดไปครับ ส่วนใครที่ยังไม่เข้าใจจากตัวอย่างที่อธิบายไปสามาถเข้าไปดูตัวอย่างการใช้งานง่ายๆได้ที่ https://github.com/dektaiimage/demo-fontawesome
แหล่งศึกษาเพิ่มเติม
ขอบคุณครับ
