นี่คือโค้ดสำหรับการสร้างปุ่มที่มีไอคอน (Icon Buttons) ด้วย CSS และ Font Awesome
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <style> button { font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; background-color: rgb(30, 173, 255); border: none; color: white; padding: 12px 16px; font-size: 32px; cursor: pointer; } i { padding: 15px; color: rgb(33, 0, 109); } button:hover { background-color: rgb(81, 44, 148); } button:hover i { color: white; } </style> </head> <body> <h1 style="font-size: 60px; font-family: Arial, Helvetica, sans-serif;">ตัวอย่าง Icon Buttons</h1> <button><i class="fa fa-home"></i>Home</button> <button> <i class="fa fa-phone-square" aria-hidden="true"></i>Call Us </button> <button><i class="fa fa-map-marker" aria-hidden="true"></i>Visit Us</button> <button><i class="fa fa-cog" aria-hidden="true"></i>Settings</button> <button><i class="fa fa-user-o" aria-hidden="true"></i>Login</button> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือปุ่มไอคอน −
