Bộ sưu tập các biểu tượng CSS thuần túy này là những gì tất cả các nhà phát triển Frontend muốn

Nhà thiết kế Adobe Wenting Zhang đã tạo ra một ứng dụng web thú vị cho tạo các biểu tượng CSS thuần. Nó được đặt tên đơn giản “Biểu tượng CSS” và nó có thể là một trong những điều thú vị nhất máy phát biểu tượng cho các nhà phát triển lối vào.

Dự án này là hoàn toàn miễn phí và nguồn mở trên GitHub vì vậy bạn có thể tải xuống miễn phí và gây rối với bất kỳ mã nào.

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

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

Bạn có thể chọn giữa biểu tượng dòng mỏng hoặc là biểu tượng đầy màu tối. Cả hai đều sử dụng 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 trượt với mã HTML và CSS cùng với biểu tượng được phóng to.

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 biểu tượng bản sao nhỏ. Nhấn vào đó để tự động sao chép mã vào clipboard của bạn. Oh, và biểu tượng sao chép đó? Cũng được xây dựng với mã CSS thuần của Wenting.

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

Vì các biểu tượng này là khá đơn giản, họ có thể sẽ không làm việc cho mọi trang web. Nhưng đây là một 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í.

Kiểm tra Trang chủ biểu tượng CSS đến xem thêm ví dụ và để sao chép / chỉnh sửa nguồn. Bạn cũng có thể kiểm tra từng biểu tượng riêng biệt trong CodePen nếu bạn muốn đồ chơi xung quanh với nguồn trong trình duyệt của bạn.