เกี่ยวกับ Icons รูปภาพที่เอาไว้คลิกลิงค์ หรือภาพแสดงเป็น Logo Icon
How To Add Icons
เพิ่ม icon ลงในหน้า HTML กับที่เก็บ icon เช่น Font Awesome ระบุชื่อ icon ใน class HTML แบบ inline ( <i> หรือ<span>) เวกเตอร์ที่ใช้ในการปรับแต่งกับ CSS (size, color, shadow, etc.) ลิงค์ที่เก็บ icon Font Awesome Icons
Font Awesome Icons
การใช้ Font Awesome Icons เราต้องเพิ่ม Script ในส่วนของ <head> หน้าเพจ HTML โดยไม่ต้อง download หรือ ติดตั้ง
<script src="https://kit.fontawesome.com/yourcode.js"></script>มาลองทำกันเลย
<!doctype html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body style="background-color: thistle"> //สีพื้นหลัง//ผลักตัวเองจากขอบ 5%; Icon ขนาด 30px
<div style="padding: 5%; font-size: 30px;">
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-address-card"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</div>
</body>
</html>
Bootstrap Icons
การใช้งาน Bootstrap glyphicons เราต้องเพิ่ม Link ดังนี้ในส่วน <head> ของหน้า HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">มาลองทำกันเลย
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head>
<body style="background-color: thistle"> //สีพื้นหลัง//ผลักตัวเองจากขอบ 5%; Icon ขนาด 30px
<div style="padding: 5%; font-size: 30px;">
<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></div>
</body>
</html>
Google Icons
การใช้งาน Google icons เราต้องเพิ่ม Link ดังนี้ลงใน <head> ของหน้า HTML
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">มาลองเขียนกันเลย
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head>
<body style="background-color: thistle"> //สีพื้นหลัง<div style="padding: 5%;"> //ผลักตัวเองจากขอบ 5%;
<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>
</div>
</body>
</html>
Icons สำเร็จรูป เอาไว้ให้เราเลือกใช้ ให้เหมาะกับงาน ที่เราต้องการ ยังไงลองใช้กันดูเน้อ บ๊ะบายยย . ไว้มาต่อในอีกเรื่องถัดไป
