Icon Font คือการนำไอคอนมาทำเป็นฟ้อนต์สามารถย่อขยายได้โดยที่รูปไม่แตก นอกจากนั้นการใช้ Icon Font จะทำให้เรารวมทุกไอคอนในไฟล์ฟ้อนต์ไฟล์เดียวได้ ทำให้เราโหลดไฟล์แค่ 1 ไฟล์เท่านั้น โดยใช้ CSS3 Font Face ในการโหลดไฟล์ฟ้อนต์เข้ามาใช้ ซึ่งช่วยแก้ปัญหาของไฟล์ PNG ที่ต้องแยก 1 ไอคอนต่อ 1 ไฟล์
จุดเด่นของ Icon Font คือถ้านำมาใส่ในหน้าเว็บไซต์ก็เหมือนเราใส่ตัวอักษรแค่ 1 ตัวทำให้สามารถใช้ css ตกแต่งได้ตามใจชอบเลยค่ะ
Font Awesome ฟ้อนต์ไอคอนฟรี ความสามารถระดับ 5 ดาว 
Font Icon ชุดนี้มีทั้งหมด 300+ ไอคอนให้เลือกใช้ และยังเพิ่มขึ้นเรื่อยๆในอนาคตอีกด้วย ส่วนถ้าใครกลัวว่าจะมีปัญหากับ Internet Explorer หรือเปล่า หายห่วงเลยค่ะเพราะ Icon Font ตัวนี้ support ตั้งแต่ IE7 ขึ้นไป
สามารถดาวน์โหลดไฟล์ที่นี่ค่ะมาดูวิธีการใส่ Font Awesome ในเว็บไซต์กันค่ะ
เราสามารถใช้ไฟล์ที่โฮสต์อยู่บน CDN ซึ่งเป็นบริการโฮสต์ไฟล์ฟรี ข้อเสียคือใน Firefox ไอคอนจะไม่ขึ้นนะค่ะ เพราะ Firefox จะป้องกันการดึงฟ้อนต์จาก URL ของเว็บอื่นมาใช้ เพราะฉะนั้นให้เทสใน Chrome ก่อนค่ะ ถ้าจะเอามาใช้จริงจังค่อยโหลดมาใส่โฟลเดอร์โปรเจคของเราค่ะ การใส่ Font Awesome จาก CDN ลงในเว็บของเรา (ไม่ต้องดาวน์โหลดไฟล์) ให้ใส่โค้ดนี้ในส่วนของ <head> ของไฟล์ HTML ค่ะ
โค้ด: เลือกทั้งหมด
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
ดาวน์โหลดไฟล์มาใส่ในโฟลเดอร์เว็บไซต์ของเราหรือโฟลเดอร์โปรเจคก่อนค่ะ จากนั้นใส่ HTML ใน <head> ตามนี้เลยนะค่ะ
โค้ด: เลือกทั้งหมด
<link href="path/to/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
้
วิธีการใช้ Font Awesome
เลือกฟ้อนต์ที่เราต้องการจะใช้มาซักตัวนะค่ะ ในที่นี้แอดมินเลือกใช้ฟ้อนต์ fa-dashboard ค่ะ แล้เราก็เรียกใช้ตามโค้ดด้านล่างเลยค่ะ
โค้ด: เลือกทั้งหมด
<i class="fa fa-dashboard"></i>
โค้ด: เลือกทั้งหมด
<i class="fa fa-dashboard fa-lg"></i>
<i class="fa fa-dashboard fa-2x"></i>
<i class="fa fa-dashboard fa-3x"></i>
<i class="fa fa-dashboard fa-4x"></i><br /><i class="fa fa-dashboard fa-5x"></i>