ไอคอน CSS
คุณสามารถเพิ่มไอคอนในหน้า HTML ของคุณได้อย่างง่ายดายโดยใช้ไลบรารีไอคอน
วิธีเพิ่มไอคอน
วิธีที่ง่ายที่สุดในการเพิ่มไอคอนในหน้า HTML ของคุณคือการใช้ไลบรารีไอคอน เช่น Font Awesome
เพิ่มชื่อของคลาสไอคอนที่ระบุให้กับองค์ประกอบ HTML แบบอินไลน์ (เช่น<i>หรือ
<span>)
ไอคอนทั้งหมดในไลบรารีไอคอนด้านล่าง เป็นเวกเตอร์ที่ปรับขนาดได้ซึ่งสามารถปรับแต่งด้วย CSS (ขนาด สี เงา ฯลฯ)
Font Awesome Icon
ในการใช้ไอคอน Font Awesome ให้ไปที่
fontawesome.comลงชื่อเข้าใช้ และรับโค้ดเพื่อเพิ่มใน<head>ส่วนของหน้า HTML ของคุณ:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
อ่านเพิ่มเติมเกี่ยวกับวิธีเริ่มต้นใช้งาน Font Awesome ใน บท ช่วยสอน Font Awesome 5
หมายเหตุ:ไม่จำเป็นต้องดาวน์โหลดหรือติดตั้ง!
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
ผลลัพธ์:
สำหรับการอ้างอิงที่สมบูรณ์ของไอคอน Font Awesome ทั้งหมด โปรดไปที่การอ้างอิงไอคอนของ เรา
ไอคอน Bootstrap
ในการใช้ Bootstrap glyphicons ให้เพิ่มบรรทัดต่อไปนี้ภายใน<head>ส่วนของหน้า HTML ของคุณ:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
หมายเหตุ:ไม่จำเป็นต้องดาวน์โหลดหรือติดตั้ง!
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
ผลลัพธ์:
Google ไอคอน
หากต้องการใช้ไอคอน Google ให้เพิ่มบรรทัดต่อไปนี้ใน<head>ส่วนหน้า HTML ของคุณ:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
หมายเหตุ:ไม่จำเป็นต้องดาวน์โหลดหรือติดตั้ง!
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
ผลลัพธ์:
สำหรับรายการไอคอนทั้งหมด โปรดไปที่ บทช่วย สอนเกี่ยวกับไอคอนของ เรา