Cách để sử dụng những icon đẹp mang thẻ tag "svg" 2020

Change another language

Icon là một từ ngữ mang ý nghĩa là 1 biểu tượng dùng để biểu thị một phần trong website của bạn : mục lục, liên kết, ... Nếu website của bạn không có những icon đó thì sẽ không đẹp và giao diện sẽ không được đẹp mắt. Hơn nữa nếu bạn sử dụng những thẻ tag <i> thì buộc phải có thư viện lưu trữ ( theo suy nghĩ của mình) ví dụ như Font Awesome. Nhưng nếu bạn không sử dụng link thư viện thì nó đoạn code nó sẽ phức tạp hơn nhưng đổi lại sẽ không phụ thuộc quá nhiều vào link thư viện đó.

Nhưng bạn không phải lo vì thế giới HTML rất lộng lớn, không chỉ có thẻ <i> mà cũng còn những thẻ khác như thẻ <svg>. Vì thể ở bài viết này mình sẽ hướng dẫn cho các bạn cách để sử dụng những icon mang thẻ <svg> 1 cách dễ hiểu nhất.

Các bước thực hiện :

Bước 1 : Truy cập website :

Bạn truy cập vào website sau để lấy những icon cần thiết, giao diện có thể trông như sau :

Bạn gõ vào khung tìm kiếm ở giữa giao diện icon mà mình cần tìm với ngôn ngữ Tiếng Anh, ví dụ như đồng hồ thì gõ "clock"...

Điển hình như ở trên là 1 số icon đồng hồ được viết bằng HTML,... bạn có thể click chọn vào để xem và điều chỉnh

Bước 2 : Điều chỉnh và lấy nội dung icon bằng thẻ <svg> :

Sau khi bạn đã click chọn và điều chỉnh màu, thêm 1 số họa tiết thì tiếp theo bạn click chọn "Embed HTML" đê lấy nội dung icon dùng thẻ <svg>...

Bạn cần phải điều chỉnh ít nhất 1 vài thứ trước khi bấm nút "Embed HTML" vì nếu như không làm như thế, bạn sẽ không thể copy được icon dưới dạng thẻ <svg>

Bước 3 : Dán đoạn code icon vào nơi muốn hiển thị

Bây giờ ở bước này bạn chỉ cần copy bằng cách click vào source code trên trang đó rồi paste sang nơi bạn muốn hiển thị, ví dụ như thanh tìm kiếm thêm cái kính lúp...

 

Ngoài ra bạn có thể xem demo kĩ hơn bằng cách truy cập trang liên hệ của mình, ở đó mình có chèn 1 vài icon có sử dụng thẻ <svg>

Chỉ với bấy nhiêu đó bước thôi là bạn có thể sử dụng 1 kho icon miễn phí rồi, ở trong trang đó họ có để là tỉ lệ tuyệt vời (Pixel Perfect) để bạn chọn cho đúng và đẹp icon hơn

Mong bạn làm được 😊

Writer - 2020

Đề xuất