บทความนี้จะพูดถึงคำ 2 คำ คือ Icon และ Font ที่ใช้งานบนเว็บ ซึ่งทุกคนคงจะรู้จัก Web Icon กันดีอยู่แล้วว่ามันคือรูปภาพขนาดเล็กที่ปรากฏบนหน้าเว็บไซต์ ใช้เป็นสัญลักษณ์แทนความหมายต่างๆ เช่น รูปแว่นขยายมีความหมายถึงการค้นหาข้อมูล รูปแผ่นดิสก์ใช้แทนความหมายของการบันทึกข้อมูล เป็นต้น รูปภาพเหล่านี้ส่วนใหญ่จะเป็นไฟล์นามสกุล .png ซึ่งสามารถทำเป็นรูปที่มีพื้นหลังโปร่งใสได้
ในส่วนของการใช้งาน Font บนเว็บไซต์นั้นสามารถอ่านได้จากบทความ @font-face ครับ กล่าวโดยสรุปแบบง่ายๆ คือ Font เป็นข้อความที่ใช้นำเสนอข้อมูลบนเว็บไซต์ครับ และการพัฒนาเว็บไซต์ในปัจจุบันนี้ได้มีสิ่งที่น่าสนใจเกิดขึ้น เมื่อมีการนำ Icon และ Font มารวมกัน คือการทำ Icon ให้เป็น Font หรือการสร้างตัวอักษรที่มีรูปร่างเป็น Icon เรียกใช้งานผ่าน CSS class แล้วแสดงผลเหมือนเป็นรูปภาพรูปหนึ่ง ข้อดีของการทำแบบนี้คือเราสามารถจัดการเรื่องขนาด และสีได้ด้วยการใส่ CSS อย่างง่ายได้
Icon Font ใน Bootstrap Framework
Bootstrap Framework ที่นิยมใช้งานกันอย่างแพร่หลายก็ได้จัดเตรียมคอมโพเน้นต์ที่เป็น Icon Font ให้ใช้งานด้วยเหมือนกัน โดยจะใช้ชื่อว่า Gryphicons (http://getbootstrap.com/components/#glyphicons) ประกอบด้วย Icon ต่างๆ มากมายดังรูป
วิธีการใช้งานก็ไม่ยาก แค่กำหนด CSS class ให้กับแท็ก <span> ดังตัวอย่างนี้
Font Awesome
Font Awesome เป็นแหล่งรวม Icon Font ที่น่าสนใจมากอีกแหล่งหนึ่ง มี Icon สวยๆ ให้เลือกมากมาย วิธีการติดตั้งมี 2 วิธีเช่นเดียวกับการเรียกใช้งาน CSS ทั่วไป ดังนี้
- ติดตั้งผ่าน MaxCDN Bootstrap ในแท็ก <head> ดังนี้
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
- ดาวน์โหลดจากเว็บ http://fortawesome.github.io/Font-Awesome มาติดตั้งบนเว็บไซต์ของเราได้โดยตรง และติดตั้งในแท็ก <head> ดังนี้
<link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>
วิธีการใช้งานให้ใช้ผ่านแท็ก <i> หรือ <span> เช่น
<i class=”fa fa-camera-retro”></i> fa-camera-retro
ก็จะทำให้ได้ Icon รูปกล้องถ่ายรูปดังรูป
ท่านสามารถศึกษาเพิ่มเติมได้จากตัวอย่างในเว็บนี้ครับ http://fortawesome.github.io/Font-Awesome/examples