วิธีใช้งาน Font Awesome สุดยอดไอคอน library ยอดนิยมของ dev

   By: DH Team

   อัปเดตล่าสุด Nov. 7, 2024

วิธีใช้งาน Font Awesome สุดยอดไอคอน library ยอดนิยมของ dev

บทความนี้เราจะพามาเรียนรู้วิธีใช้ Font Awesome ในโปรเจคท์ web dev ของเรากันครับ โดยจะครอบคลุมทั้งการติดตั้ง การใช้งาน CDN และการใช้งานร่วมกันกับเว็บเฟรมเวิร์คยอดนิยม พร้อมตัวอย่างโค้ด เข้าใจง่าย เหมาะสำหรับนักพัฒนาทุกระดับครับ


Font Awesome คืออะไร?

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



ที่เจ๋งไปกว่านั้น Font Awesome ใช้งานง่ายมาก แค่เพิ่ม CSS เข้าไปในโปรเจ็กต์ของเรา แล้วใส่คลาส CSS ลงไปในแท็ก HTML ก็ได้ไอคอนสวย ๆ มาใช้แล้วครับ


ทำไมต้องใช้ Font Awesome?

เพื่อน ๆ สมาชิกอาจจะสงสัยว่า "ทำไมต้องใช้ Font Awesome ด้วยล่ะ?" มาดูกันว่ามันมีข้อดียังไงบ้าง

  • 1. ประหยัดเวลา: ไม่ต้องออกแบบไอคอนเอง ใช้เวลาโฟกัสกับการพัฒนาฟีเจอร์อื่นๆ ได้มากขึ้น
  • 2. ปรับแต่ง (custom) ง่าย: เปลี่ยนขนาด สี หรือเพิ่มเอฟเฟ็กต์ให้ไอคอนได้ง่าย ๆ ด้วย CSS
  • 3. โหลดเร็ว: ใช้เทคโนโลยี SVG ทำให้ไอคอนโหลดเร็วและคมชัดในทุกขนาดหน้าจอ
  • 4. รองรับหลายเบราว์เซอร์: ใช้ได้กับทุกเบราว์เซอร์หลัก ๆ ไม่ต้องกังวลเรื่องความเข้ากันได้


วิธีติดตั้ง Font Awesome

การติดตั้ง Font Awesome ทำได้หลายวิธี แต่วิธีที่ง่ายที่สุดคือการใช้ CDN (Content Delivery Network) ลองทำตามขั้นตอนนี้ดูนะครับ

1. เปิดไฟล์ HTML ขึ้นมา

2. ก่อนปิดแท็ก  </head>  ให้ใส่โค้ดนี้ลงไป

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

แค่นี้ก็เสร็จแล้ว ง่ายมากใช่ไหมครับ


วิธีใช้งาน Font Awesome

เมื่อติดตั้งเสร็จแล้ว การใช้งานก็ง่ายมาก แค่ใส่คลาส CSS ลงไปในแท็ก  <i>  หรือ  <span>  ก็ได้ไอคอนมาแล้ว เช่น

<i class="fas fa-heart"></i> <!-- ไอคอนรูปหัวใจ -->
<span class="fas fa-camera"></span> <!-- ไอคอนรูปกล้อง -->


ลองปรับเล่นกันดูครับ

<i class="fas fa-heart fa-3x" style="color: red;"></i> <!-- หัวใจสีแดงขนาดใหญ่ -->


การใช้ Font Awesome กับ Django

Django ถือเป็นอีกหนึ่งเว็บเฟรมเวิร์คยอดนิยมมาก ๆ เลยครับ การใช้ Font Awesome ร่วมกับ Django นั้นก็ไม่ยากเลย (หากยังไม่คุ้นเคยกับ Django ลองอ่านและศึกษาเพิ่มเติมกับบทความเกี่ยวกับ Django ของเราที่เขียนไว้แบบละเอียดได้เลยครับ)


วิธีการใช้งานก็คล้าย ๆ กับที่เราทำใน HTML ธรรมดา แต่เราจะใส่ลิงก์ CDN ไว้ในไฟล์ base.html ของเรา

{% raw %}
<!DOCTYPE html>
<html>
<head>
    <!-- โค้ดอื่น ๆ ของคุณ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>
{% endraw %}


จากนั้นในไฟล์ template อื่น ๆ คุณก็สามารถใช้ไอคอน Font Awesome ได้แล้ว

{% raw %}
{% extends 'base.html' %}
{% block content %}
<h1>ยินดีต้อนรับ! <i class="fas fa-smile"></i></h1>
<p>คลิกที่นี่เพื่อแชร์ <i class="fas fa-share-alt"></i></p>
{% endblock %}
{% endraw %}


เคล็ดลับการใช้ Font Awesome

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


สรุป

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


ลองเอาไปใช้ดูนะครับ แล้วมาแชร์ประสบการณ์กันว่าคุณเอา Font Awesome ไปทำอะไรเจ๋ง ๆ บ้าง! ขอให้สนุกกับการพัฒนานะครับ!


บทความที่เกี่ยวข้อง

เปิดโลกการเขียนโปรแกรมและ Software Development ด้วย online courses ที่จะพาคุณอัพสกิลและพัฒนาสู่การเป็นมืออาชีพ เรียนออนไลน์ เรียนจากที่ไหนก็ได้ พร้อมซัพพอร์ตหลังเรียน

เรียนเขียนโปรแกรม

คอร์สเรียนแนะนำ

พัฒนาเว็บไซต์ด้วย Django Python

คอร์สอบรม เรียนทำเว็บ ด้วย Django สุดยอด web framework อันดับ 1 ที่ได้รับ…

Full Stack Developer 2024

คอร์สเรียน Full Stack Developer 2024 ด้วยเฟรมเวิร์คยอดนิยมในการพัฒนา A…