Skip to main content

สารจากผู้เขียน

ในแต่ละวันที่เพื่อน ๆ เข้าดูเว็บไซต์ต่าง ๆ ก็จะต้องเจอสิ่งที่เรียกว่า Icon ที่ใช้สื่อความหมายส่วนต่าง ๆ ในเว็บไซต์ช่วยให้เราเข้าใจว่าใช้สื่อถึงอะไร เอาไว้ทำอะไร วันนี้ผมก็จะมาสอนการใช้ Font Awesome ในการแสดง Icon ถ้าพร้อมแล้วไปดูกันเลย

person

วิธีการเรียกใช้ Font Awesome

เรียกใช้จาก Content Delivery Network (CDN)

เป็นวิธีที่ง่ายที่สุดในการเรียกใช้ Font Awesome เพียงเรานำโค้ดด้านล่างนี้ใส่ที่ไฟล์ html ในแท็ก head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>

สามารถดูเพิ่มเติมที่นี่

เรียกใช้จาก NPM (Node Packages Module)

วิธีนี้จะนิยมใช้ตอนที่ทำ Project ที่ใช้ Javascript Library & Framework เช่น React, Vue

  • โดยก่อนอื่นเราต้องติดตั้ง Node JS ลงในเครื่องคอมพิวเตอร์ของเราก่อนโดย click ที่ลิงก์นี้ nodejs.org

ซึ่งจะมีให้เลือกระหว่างเวอร์ชั่นที่แนะนำ กับเวอร์ชั่นล่าสุด

  • หลังจากนั้นให้เราเปิด cmd, powershell หรือ Terminal แล้ว Change Directory (cd) ไปที่ Folder ที่เราใช้ทำ project จากนั้นเริ่มติดตั้ง packages ของ Font Awesome
cd "path/projectFolder"
npm i @fortawesome/fontawesome-free
<!-- การเรียกใช้ใน html -->
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
// การเรียกใช้ใน Javascript library & framework (React, Vue ฯลฯ)
import "@fortawesome/fontawesome-free/css/all.min.css";

ได้เวลาเลือก Icon แล้ว!!

1. เพื่อน ๆ สามารถค้นหา iconsได้ที่ https://fontawesome.com/icons

2. ให้เรา click ที่ icon แล้วจะโผล่หน้านี้มาให้เรา copy code ด้านล่างในภาพไปวางในส่วนที่ต้องการของเว็บเราโดยจะมีให้เลือก

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon</title>
    <style>
        body{
            background-color: azure;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
</head>
<body>
    <!-- ตัวอย่างการใช้ใน html -->
    <h1><i class="fa fa-brands fa-sketch"></i> Diamond</h1>
    <h1><i class="fa-solid fa-right-to-bracket"></i> Right to bracket</h1>
    <h1><i class="fa-solid fa-headphones"></i> Headphone</h1>
</body>
</html>
//ตัวอย่างการใช้ใน React
import "@fortawesome/fontawesome-free/css/all.min.css";
function App(){
  return (
    <h1><i className="fa fa-brands fa-sketch"></i> Diamond</h1>
    <h1><i className="fa-solid fa-right-to-bracket"></i> Right to bracket</h1>
    <h1><i className="fa-solid fa-headphones"></i> Headphone</h1> 
  );
}

ตัวอย่างการแสดงผล

สรุป

ก็จบไปแล้วนะครับกับการใช้งาน Font Awesome ในการแสดง Icon เพียงเท่านี้เพื่อน ๆ ก็สามารถเรียกใช้ icon จาก Font Awesome มาใช้ในหน้าเว็บเราได้แล้ว หลังจากนั้นขึ้นอยู่กับเว่าจะจัดให้ icon นั้นอยู่ส่วนไหนของหน้าเว็บแล้ว หวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนครับ

อ้างอิง

  1. Font Awesome Icon และวิธีการเรียกใช้, สืบค้นเมื่อ 8 ตุลาคม 2566
    จาก: https://fontawesome.com/icons
  2. CDN Font Awesome สืบค้นเมื่อ 8 ตุลาคม 2566
    จาก: https://cdnjs.com/libraries/font-awesome
  3. การติดตั้ง Node.js, สืบค้นเมื่อ 9 ตุลาคม 2566
    จาก: https://nodejs.org/
  4. การติดตั้ง Font Awesome packages สืบค้นเมื่อ 9 ตุลาคม 2566
    จาก: https://fontawesome.com/docs/web/setup/packages
Kittikorn Voraprateep

Author Kittikorn Voraprateep

Dev Init Frontend

More posts by Kittikorn Voraprateep

Leave a Reply

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า