รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

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 ตัว สมมติว่าผมอยากใช้ไอคอนด้านล่างนี้นะครับ

     

    font awesome icon test

     

    จะให้เห็นว่าด้านข้างรูปไอคอนเขียนว่า 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 />