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