วิธีใส่ไอคอนลงในปุ่ม HTML

บทความนี้สอนขั้นตอนการใส่ไอคอน (icon) ลงในปุ่มของแท็ก button ภาษา HTML โดยเราจะใช้ไอคอนจาก font awesome ซึ่งเป็นชุดเครื่องมือแบบอักษร และไอคอนที่ใช้ CSS และ Less ทำให้เราสามารถแสดงไอคอนในปุ่มของ HTML ได้โดยการเขียนโค้ด บทความนี้เขียนโดยใช้ font awesome เวอร์ชั่น 6

ตัวอย่าง วิธีใส่ไอคอนลงในปุ่ม HTML

1. ติดตั้ง font awesome ผ่าน CDN โดยการคัดลอกโค้ดด้านล่าง และนำไปวางไว้ภายในแท็ก head ของเว็บไซต์

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

2. เลือกไอคอนที่ต้องการใช้งานจากลิงก์ด้านล่าง

https://fontawesome.com/search?o=r&m=free

3. คลิกที่ไอคอนที่ต้องการใช้งาน และเลือกแท็บ HTML จากนั้นกดคลิกที่โค้ด HTML ที่แสดง จะเป็นการคัดลอกโค้ดดังกล่าวตัวอย่าง คือ ไอคอนรูปหัวใจ (heart)

4. เขียนโค้ดสร้างปุ่มด้วยแท็ก <button> และใส่ไอคอนลงในปุ่มดังกล่าว

<button>
    <i class="fa-solid fa-heart" style="color: red"></i> 
    Love Devdit
</button>

จากตัวอย่างสร้างปุ่มด้วยแท็ก <button> จากนั้นใส่ไอคอนหัวใจ (heart) ด้วย font awesome กำหนดสีให้เป็นสีแดง พร้อมข้อความว่า ‘Love Devdit’