บทความนี้เราจะพามาเรียนรู้วิธีใช้ 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 ไปทำอะไรเจ๋ง ๆ บ้าง! ขอให้สนุกกับการพัฒนานะครับ!