By: DH Team
อัปเดตล่าสุด July 14, 2024
บทความนี้เราจะพามาเรียนรู้วิธีใช้ Font Awesome ในโปรเจคท์ web dev ของเรากันครับ โดยจะครอบคลุมทั้งการติดตั้ง การใช้งาน CDN และการใช้งานร่วมกันกับเว็บเฟรมเวิร์คยอดนิยม พร้อมตัวอย่างโค้ด เข้าใจง่าย เหมาะสำหรับนักพัฒนาทุกระดับครับ
Font Awesome เป็นชุดไอคอนและสัญลักษณ์ที่ใช้กันอย่างแพร่หลายในการพัฒนาเว็บไซต์และแอพพลิเคชัน เหมือนกับคลังไอคอนขนาดใหญ่ที่เราสามารถหยิบมาใช้ได้ง่าย ๆ โดยไม่ต้องวาดเอง ไม่ว่าจะเป็นไอคอนรูปหัวใจ ปุ่มแชร์ หรือแม้แต่โลโก้ของแบรนด์ดัง ๆ ก็มีให้ใช้ทั้งนั้น
ที่เจ๋งไปกว่านั้น Font Awesome ใช้งานง่ายมาก แค่เพิ่ม CSS เข้าไปในโปรเจ็กต์ของเรา แล้วใส่คลาส CSS ลงไปในแท็ก HTML ก็ได้ไอคอนสวย ๆ มาใช้แล้วครับ
เพื่อน ๆ สมาชิกอาจจะสงสัยว่า "ทำไมต้องใช้ 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">
แค่นี้ก็เสร็จแล้ว ง่ายมากใช่ไหมครับ
เมื่อติดตั้งเสร็จแล้ว การใช้งานก็ง่ายมาก แค่ใส่คลาส 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> <!-- หัวใจสีแดงขนาดใหญ่ -->
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 ไปทำอะไรเจ๋ง ๆ บ้าง! ขอให้สนุกกับการพัฒนานะครับ!
เปิดโลกการเขียนโปรแกรมและ Software Development ด้วย online courses ที่จะพาคุณอัพสกิลและพัฒนาสู่การเป็นมืออาชีพ เรียนออนไลน์ เรียนจากที่ไหนก็ได้ พร้อมซัพพอร์ตหลังเรียน
คอร์สเรียนเขียนโปรแกรม