CSS
Typography & Colors
Google Icons (Material Symbols)
เรียนรู้การใช้ Material Symbols จาก Google — โหลดผ่าน <link> tag, เพิ่ม icon ด้วย <span>, หาชื่อ icon จาก fonts.google.com/icons และปรับแต่งด้วย font-size และ color
1. Google Icons คืออะไร
Google Icons หรือ Material Symbols คือ icon library ฟรีจาก Google ที่ใช้งานได้บนเว็บโดยไม่ต้องดาวน์โหลดไฟล์ ทำงานเหมือน font — browser โหลด icon มาจาก Google แล้วแสดงผลเป็นสัญลักษณ์ที่ปรับขนาดและสีด้วย CSS ได้ เพราะ icon เหล่านี้เป็น font จริงๆ ไม่ใช่รูปภาพ จึงคมชัดในทุกขนาดและบนทุกหน้าจอ
- มี icon กว่า 3,000 แบบครอบคลุม UI ทั่วไป เช่น home, search, menu, close
- โหลดผ่าน <link> tag เหมือน Google Fonts — ไม่ต้องติดตั้งอะไร
- ปรับขนาดด้วย font-size และสีด้วย color เหมือน text ปกติ
- คมชัดทุกขนาดเพราะเป็น vector ไม่ใช่ไฟล์รูปภาพ
2. วิธีโหลด Google Icons
โหลด Material Symbols ด้วย <link> tag ใน <head> ของ HTML เหมือนกับที่เคยทำกับ Google Fonts — browser จะดาวน์โหลด icon font มาให้อัตโนมัติ
เพียงบรรทัดเดียวก็พร้อมใช้ icon ทุกแบบใน Material Symbols
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />- 1. คัดลอก <link> tag ด้านบนไปวางใน <head> ของ HTML
- 2. ตรวจว่า <link> อยู่ก่อน CSS ของตัวเองเพื่อให้ font โหลดก่อน
- 3. จากนั้นใช้ icon ได้ทุกที่ในหน้าเว็บ
3. วิธีใช้ icon ใน HTML
ใส่ icon ด้วย <span> ที่มี class="material-symbols-outlined" แล้วเขียนชื่อ icon เป็น text ข้างใน ชื่อ icon ใช้ตัวพิมพ์เล็กและขีดล่างแทนช่องว่าง เช่น home, search, arrow_back
เปลี่ยนชื่อ icon ใน span เพื่อแสดง icon ที่ต้องการ
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">close</span>
<span class="material-symbols-outlined">arrow_back</span>
<span class="material-symbols-outlined">favorite</span>4. หาชื่อ icon จาก Google
ชื่อ icon ทุกแบบอยู่ที่ fonts.google.com/icons ค้นหาด้วยคำอธิบายภาษาอังกฤษ แล้วคลิก icon เพื่อดูชื่อที่ต้องใส่ใน span
- 1. ไปที่ fonts.google.com/icons
- 2. พิมพ์คำค้นหาในช่อง Search icons เช่น "star", "notification", "person"
- 3. คลิก icon ที่ต้องการ — ชื่อ icon จะแสดงด้านล่าง
- 4. คัดลอกชื่อ icon แล้วนำไปใส่ใน <span class="material-symbols-outlined">ชื่อ_icon</span>
5. ปรับแต่ง icon ด้วย CSS
เพราะ icon เป็น font การปรับแต่งจึงใช้ CSS เดียวกับ text — font-size สำหรับขนาด และ color สำหรับสี ใช้ vertical-align ช่วยจัดตำแหน่งให้ตรงกับข้อความข้างๆ ได้
icon ตอบสนองต่อ font-size และ color เหมือน text ปกติ
.nav-icon {
font-size: 1.5rem;
color: #2563eb;
vertical-align: middle;
}
.large-icon {
font-size: 3rem;
color: #dc2626;
}6. Recap
- Material Symbols คือ icon library ฟรีจาก Google ที่โหลดผ่าน <link> tag
- ใช้ icon ด้วย <span class="material-symbols-outlined">ชื่อ_icon</span>
- หาชื่อ icon ได้ที่ fonts.google.com/icons
- ปรับขนาดด้วย font-size และสีด้วย color เหมือน text ปกติ
- icon เป็น vector font จึงคมชัดทุกขนาดและไม่ต้องดาวน์โหลดไฟล์เพิ่ม
Lab 1: ปรับขนาดและสี icon
เป้าหมาย: ใช้ CSS ปรับแต่ง icon ที่โหลดจาก Google โจทย์: 1. กำหนด .nav-icon ให้มี font-size: 2rem 2. กำหนด .nav-icon ให้มี color: #2563eb
Lab 2: เพิ่ม icon ใน HTML
เป้าหมาย: เขียน HTML ที่ถูกต้องเพื่อแสดง icon จาก Google โจทย์: 1. <link> และ CSS ถูกจัดเตรียมให้แล้ว 2. เพิ่ม <span> ที่มี class="material-symbols-outlined" และชื่อ icon เป็น "search" 3. เพิ่ม <span> ที่มี class="material-symbols-outlined" และชื่อ icon เป็น "close"