in

CSS Icon: Thư viện biểu tượng CSS dành cho thiết kế giao diện

Nhà thiết kế Adobe Wenting Zhang đã tạo ra một ứng dụng web thú vị để tạo các biểu tượng CSS gốc. Nó được đặt tên đơn giản là CSS Icon và nó có thể là một trong những trình tạo biểu tượng thú vị nhất cho các nhà phát triển giao diện người dùng.

Dự án này hoàn toàn miễn phí và có nguồn mở trên GitHub nên bạn có thể thoải mái tải xuống và sử dụng.

Các biểu tượng này không có bất kỳ phụ thuộc CSS nào hoặc cần bất kỳ tính năng trình duyệt đặc biệt nào. Thoạt nhìn, có vẻ như các biểu tượng được xây dựng trên SVG nhưng thực ra chúng chỉ là các div.

Thông qua sự kỳ diệu của CSS, bạn có thể xây dựng các biểu tượng cho các phần tử giao diện chung như menu, biểu tượng ba chấm hoặc biểu tượng in (trong số nhiều biểu tượng khác).

Bạn có thể chọn giữa các biểu tượng mỏng hoặc biểu tượng tô . Cả hai đều sử dụng các thuộc tính CSS tương tự và bạn thậm chí có thể xem chúng là gì bằng cách nhấp vào bất kỳ biểu tượng nào trong danh sách. Bạn sẽ thấy một thanh bên trượt với mã HTML và CSS cùng với biểu tượng được phóng to.

CSS Icon

Nếu bạn nhìn về phía góc trên bên phải của các trường mã, bạn sẽ thấy một biểu tượng sao chép nhỏ. Nhấp vào đó để tự động sao chép đoạn code vào clipboard.

Để thay đổi màu của bất kỳ biểu tượng nào, chỉ cần tìm thuộc tính color trong class chính của icon. Cập nhật một thuộc tính color đó cũng sẽ thay đổi mọi thứ khác.

Vì các biểu tượng này khá đơn giản, chúng có thể sẽ không hoạt động cho mọi trang web. Nhưng đây là một sự thay thế tuyệt vời cho hình ảnh hoặc phông chữ biểu tượng và nó hoàn toàn miễn phí.

Tham khảo CSS Icon tại đây

Written by Linh Nguyễn

Mình đang thực hiện trang Trải Nghiệm Số tại địa chỉ trainghiemso.vn, ngoài ra còn là BTV Công Nghệ tại báo VietNamNet. Trang blog này mình tổng hợp lại các bài viết do mình thực hiện, cũng như viết lảm nhảm cho vui.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments