【HTML】การเพิ่มและแสดงไอคอน | การใช้ FontAwesome และ Material Icons
บทความนี้อธิบายวิธีการแสดงไอคอนและอักขระพิเศษใน HTML โดยใช้ FontAwesome และ Material Icons.
🔹 รหัสบางส่วน
<span class="fa fa-camera"></span> ถ่ายรูป
💻 รหัสทั้งหมดที่ทำงานได้ (คัดลอกและวางใน HTML ได้เลย)
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <title>การแสดงไอคอน</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <span class="fa fa-camera"></span> ถ่ายรูป </body> </html>
📚 ฟอนต์ไอคอน: กลไกและการใช้งานจริง
วิธีการแสดงไอคอนโดยใช้ <span> เป็นวิธีที่ได้รับความนิยมในการพัฒนาเว็บสมัยใหม่ ด้วยการใช้รหัสง่ายๆ เช่น <span class="fa fa-camera"></span> คุณสามารถแสดงไอคอนที่หลากหลายได้.
แก่นของฟอนต์ไอคอน
FontAwesome และ Material Icons ใช้เทคโนโลยีที่เรียกว่า "ฟอนต์ไอคอน" ซึ่งหมายความว่าไอคอนแต่ละตัวจะถูกปฏิบัติเหมือนกับอักขระหนึ่งตัวของฟอนต์พิเศษ ซึ่งทำได้โดยการกำหนดคุณสมบัติ font-family โดยใช้ฟอนต์เฉพาะ ในบางกรณียังใช้ pseudo-element ::before และคุณสมบัติ content ใน CSS เพื่อแสดงผลไอคอน.
การใช้งานจริงในโปรเจกต์
ในเมนูการนำทางคุณสามารถใช้รหัสเช่น <span class="fa fa-home"></span> หน้าแรก นอกจากนี้เมื่อเพิ่ม <span class="material-icons">send</span> ในปุ่มคุณจะสามารถฝังไอคอนส่งข้อความได้อย่างง่ายดาย สำหรับการออกแบบที่ตอบสนองได้ คุณสามารถตั้งค่า font-size เป็นหน่วย % หรือ vw เพื่อให้ไอคอนยืดหดตามขนาดหน้าจอ.
โปรดทราบว่า การใช้แท็ก <i> กำลังลดลงในปัจจุบันและการใช้ <span> เป็นวิธีที่ทันสมัยในการแสดงไอคอน หากใช้ CDN เพื่อโหลดไอคอนจำเป็นต้องมีการเชื่อมต่อเครือข่าย หากใช้ออฟไลน์จะต้องดาวน์โหลดไฟล์ไปใช้ในเครื่อง.
เพื่อให้โปรเจกต์มี UI ที่สอดคล้องกันแนะนำให้กำหนดขนาดของไอคอนโดยใช้หน่วย rem และจัดการสีด้วยตัวแปร CSS เช่น .icon { font-size: 1.2rem; color: var(--primary-color); } เพื่อทำการเปลี่ยนแปลงไอคอนทั้งหมดพร้อมกันได้ง่ายๆ.