Sử dụng Icons của Google Fonts cho trang web của bạn

Icons của Google Fonts cũng là một lựa chọn nhanh gọn và miễn phí cho nhu cầu sử dụng biểu tượng của bạn.

Sử dụng Icons từ Google Fonts

Để thêm Icons vào website, bạn chỉ cần thêm tập tin CSS do Google cung cấp này vào mã nguồn.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

Tùy chỉnh Icons bằng CSS

Điều đặc biệt của Icons của Google Fonts là bạn có thể tùy chỉnh các biểu tượng qua CSS.

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

Chọn biểu tượng

Để tìm kiếm biểu tượng, bạn vào liên kết sau để tìm kiếm nhé.

Đến Google Fonts

Ví dụ

<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>

Ta được kết quả như sau. Vì đây là phông chữ nên các bạn tùy chỉnh kích thước bằng font-size nhé.

search home menu close settings

Chúc các bạn thành công!

5/5 (5 bình chọn)

Bình Luận