Mục lục
1. Nhúng thư viện Icons vào website
Để sử dụng, bạn cần thêm liên kết CSS do Google cung cấp vào phần <head> của website:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />2. Tuỳ chỉnh biểu tượng bằng CSS
Material Symbols hoạt động như phông chữ, nên bạn có thể kiểm soát nhiều thuộc tính như độ dày, kích thước, kiểu đổ màu bằng CSS:
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
}3. Cách chọn biểu tượng
Google cung cấp kho biểu tượng đầy đủ tại trang chính thức. Bạn có thể tra cứu, lọc theo tên, sao chép tên biểu tượng và dán vào HTML:
4. Ví dụ sử dụng
Dưới đây là ví dụ chèn một số biểu tượng thông dụng:
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">close</span>
<span class="material-symbols-outlined">settings</span>Kết quả hiển thị:
search
home
menu
close
settings
home
menu
close
settings
Bạn có thể điều chỉnh kích thước biểu tượng bằng thuộc tính font-size như khi xử lý phông chữ thông thường.
Với cách tiếp cận này, việc tích hợp biểu tượng vào website trở nên đơn giản, nhẹ và linh hoạt hơn nhiều.
Bình luận