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

19/07/2024 0 27 2 phút đọc Demo

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 của Google Fonts cho trang web của bạn

Mục lục

Sử dụng Icons từ Google Fonts
Tùy chỉnh Icons bằng CSS
Chọn biểu tượng
Ví dụ

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,GRAD@20..48,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>