Micon - Phông chữ biểu tượng Windows 10 dành cho nhà thiết kế web

Các thiết kế lại cho Windows 10 đi kèm với nhiều tính năng mới và một diện mạo hoàn toàn mới. Một trong những thay đổi lớn nhất thuộc về phong cách biểu tượng, đặc biệt so với Windows 7 và XP.

Nhờ sự Bộ micon, bây giờ bạn có thể mang các biểu tượng kiểu Win10 ngay vào trang web của bạn.

Gói biểu tượng này đến như một phông chữ biểu tượng và nó được phát hành miễn phí qua GitHub. Repo chính có thông tin thiết lập, nhưng trang chủ Micon tính năng tất cả các biểu tượng hiển thị với tên lớp thích hợp của họ.

Cấu trúc trang web thực tế theo một định dạng tương tự như Font Awesome. Bạn có thể duyệt qua tất cả các biểu tượng và nhấp vào bất kỳ trong số họ để biết thêm chi tiết trên một trang mới.

Ví dụ: lấy biểu tượng sạc pin này sử dụng thiết kế pin và phích cắm sạc nhỏ. Bạn sẽ nhận được một xem trước biểu tượng ở các kích cỡ khác nhau, cùng với lớp biểu tượng CSS của nó, trong trường hợp này mi-PinCharging10.

Bộ biểu tượng này cũng hoạt động giống như Font Awesome, nơi bạn có thể nhúng các biểu tượng ngay vào HTML của bạn. Đoạn mã cho biểu tượng pin này hoạt động giống nhau:

Thật dễ dàng để bắt đầu, chỉ với một bản sao của biểu định kiểu Micon CSS và Một số kiến ​​thức cơ bản về phát triển front-end.

Kiểm tra trang thiết lập để tìm hiểu thêm. Thực sự, bạn chỉ cần tải xuống một bản sao của gói Micon từ GitHub và bao gồm biểu định kiểu đó (cùng với phông chữ biểu tượng phù hợp) vào trang của bạn. Từ đó, chỉ tham khảo tên lớp như trên và bạn tốt để đi.

Vì dự án này là nguồn mở, bạn miễn phí sử dụng các biểu tượng này với bất kỳ dự án, cá nhân hoặc thương mại. Và, bạn thậm chí có thể tạo tập tin của riêng bạn bằng cách làm theo các hướng dẫn xây dựng từ Micon GitHub. Bằng cách này bạn có thể chỉ gói các biểu tượng bạn muốn vào các tệp phông chữ và giảm tổng kích thước tệp.

Nhìn chung, tôi thực sự ấn tượng với nhiều biểu tượng và thiết lập dễ dàng. Bạn có thể tìm nhiều ví dụ trên trang web và thậm chí các biểu tượng hoạt hình trên trang Ví dụ bao gồm các đoạn mã.

Những biểu tượng này thậm chí hoạt động tốt với Bootstrap, để bạn có thể kết hợp nó với khung BS3 / BS4 cho một số bố cục tùy chỉnh thực sự.

Tải xuống bản quyền miễn phí từ trang chủ Micon và xem cách bạn có thể vận hành các biểu tượng kiểu Windows 10 này vào thiết kế tiếp theo của mình.