10 biểu tượng phông chữ hữu ích và miễn phí bạn nên đánh dấu

Khi ngày càng có nhiều thiết bị áp dụng màn hình độ nét cao, các biểu tượng phông chữ đang trở thành lựa chọn phổ biến để áp dụng. Nó có thể thay đổi kích thước mà không ảnh hưởng đến chất lượng và có thể tùy chỉnh thông qua CSS. Chúng ta có thể dễ dàng thay đổi màu sắc, kích thước và thậm chí là các biểu tượng phông chữ động với CSS3. Thêm vào đó là không phụ thuộc vào độ phân giải Điều này làm cho nó trông sắc nét trên bất kỳ mật độ màn hình.

FontAwgie là một trong những nguồn phông chữ phổ biến nhất, với một bộ sưu tập lớn các biểu tượng. Nhưng rất cần thiết để tải xuống toàn bộ bộ sưu tập khi bạn chỉ cần sử dụng một vài. Đây là 10 nguồn thay thế của các biểu tượng phông chữ được chế tạo tốt đôi khi tôi hy vọng bạn sẽ thấy hữu ích để xây dựng các trang web và ứng dụng tuyệt vời tiếp theo của mình thay cho FontAwgie.

Chồng tôi

StackIcons là biểu tượng phông chữ cho hơn 60 thương hiệu xã hội hiện đại. Nó đi kèm với CSS, cho phép bạn định kiểu phông chữ của mình theo nhiều hình dạng thùng chứa. Bạn có thể lấy các biểu tượng thương hiệu xã hội của mình trong các vòng tròn, hình vuông hoặc với các cạnh tròn. Bạn cũng có thể tô màu các biểu tượng bằng nhiều màu, cho màu sắc thương hiệu trung thực hơn.

Giấy phép: Phông chữ mở SIL và MIT

Twemoji Tuyệt vời

Twemoji là một dự án biểu tượng cảm xúc mã nguồn mở từ Twitter. Elle Kasai đã chuyển nó sang một biểu tượng phông chữ được gọi là Twemoji Tuyệt vời. Tất cả các tên lớp để hiển thị các biểu tượng giống như Bảng Cheat Twemoji, nhưng bạn cần sử dụng dấu gạch ngang thay vì dấu gạch dưới, đó là tất cả. Dưới đây là một ví dụ về cách chúng tôi thêm hatching_chick biểu tượng:

Giấy phép: MIT và CC-BY cho đồ họa Biểu tượng cảm xúc

Phông chữ

Font Diao là một tập hợp các biểu tượng phông chữ từ trang web hoặc công ty nổi tiếng có trụ sở tại Trung Quốc như Alibaba, Alipay, WeChat, Xiaomi và Weibo. Phông chữ có thể hữu ích khi bạn xây dựng wesbites được chỉ định cho khán giả Trung Quốc đại lục, những người có thể quen thuộc với phông chữ đặc biệt này.

Giấy phép: Giấy phép công cộng

Xã hội

Socialicy là một phông chữ được xây dựng dành riêng cho các trang web xã hội phổ biến như Facebook, Twitter và Instagram. Phông chữ được xây dựng để hoạt động độc đáo với Bootstrap. Dưới đây là một mã ví dụ để xây dựng một nút với Bootstrap .btn lớp kết hợp với các lớp phông chữ.

   Kết nối với Linkedin

Giấy phép: Giấy phép MIT.

Octicons

Octicons là một tập hợp các biểu tượng phông chữ được trình bày bởi GitHub, cho phép bạn sử dụng cùng một biểu tượng như được sử dụng bởi GitHub trong dự án của bạn. Có hơn 170 biểu tượng sẵn sàng để áp dụng cho dự án tiếp theo của bạn.

Phông chữ thanh toán

Nếu bạn sử dụng cổng thanh toán, bạn có thể muốn lấy các biểu tượng phông chữ này. Gói chứa 95 biểu tượng ngủ là phương thức thanh toán phổ biến hoặc cổng thông tin như Visa, American Express và hơn thế nữa.

Giấy phép: VẢI OFL 1.1

Biểu tượng Android

Đây là bộ biểu tượng được tạo bởi Opoloo, trước đây gọi là cộng đồng Android. Nó bao gồm 250 biểu tượng tuyệt vời với 5 kích cỡ và 14 màu sắc của các biểu tượng Android gốc.

Giấy phép: Attribution-ShareAlike 4.0 International

DevIcons

DevIcons là một tập hợp các biểu tượng phông chữ được làm thủ công bởi Theodore Vorillas. Nó chứa 85 biểu tượng và logo của các ứng dụng phát triển quen thuộc như biểu tượng GitHub, biểu tượng Gulp, biểu tượng góc cạnh và nhiều biểu tượng khác.

Giấy phép: MIT

Biểu tượng mở

Biểu tượng mở chứa 223 biểu tượng sẵn sàng để sử dụng với bootstrap, khung hoặc biểu định kiểu của riêng bạn. Kích thước phông chữ nhỏ, chỉ 12,4Kb, tức là khoảng một phần tư những gì bạn có thể tìm thấy trong FontAwgie. Điều thú vị ở đây là, các biểu tượng này có thể được thu nhỏ xuống 8px.

Giấy phép: VẢI.

Chất liệu thiết kế Phông chữ biểu tượng

Có 15 danh mục biểu tượng phông chữ lấy cảm hứng từ Thiết kế Vật liệu của Google trong gói này. Để sử dụng chúng, chỉ cần cài đặt Material-Design-Iconic-Font.ttf, sau đó sử dụng chiếc áo này. Sao chép dán các biểu tượng (không phải unicode) vào dự án của bạn. Bạn có thể phóng to các biểu tượng, tạo đường viền, xoay, xoay hoặc lật nó bằng CSS.