Các biểu tượng cho mục đích thương mại. tài nguyên có phông chữ miễn phí
Biểu tượng PSD là thành phần không thể thiếu trong bất kỳ thiết kế UI nào, tầm quan trọng không thua kém gì cả phông chữ, nhưng trên thực tế, hiếm có ai phát triển biểu tượng riêng cho từng dự án web. Mặt khác, việc tìm kiếm các biểu tượng phù hợp về chất lượng và thiết kế cũng tốn rất nhiều thời gian, nhưng hôm nay chúng tôi quyết định giúp bạn và đã chuẩn bị tuyển chọn các bộ biểu tượng miễn phí cho mọi trường hợp.
01.Biểu tượng8
Icons8 - một bộ gồm 20 nghìn biểu tượng phẳng ở mọi định dạng, kích thước và màu sắc! Các danh mục như kinh doanh, quần áo, thực phẩm và nhiều danh mục khác được trình bày ở đây. Có thể tải xuống Icons8 dưới dạng ứng dụng Mac hoặc dưới dạng kho lưu trữ ZIP.
02.Freepik
Một bộ sưu tập các biểu tượng vector sống động từ nguồn tài nguyên chuyên biệt Freepik chỉ là một trong nhiều bộ sưu tập được trình bày. Đó là lý tưởng cho các dự án kinh doanh và độc lập. Ngoài ra, bạn có thể tải xuống các biểu tượng PSD ở định dạng .AI, .EPS và .SVG.
03.Trình tìm kiếm biểu tượng
Được thiết kế với màu đen và trắng, bộ này bao gồm sự kết hợp của các biểu tượng vector chức năng và cảm xúc rõ ràng. Ngoài các biểu tượng tiêu chuẩn, bộ này còn chứa các biểu tượng ở dạng trái tim và đôi mắt, cho phép bạn thêm màu sắc cảm xúc vào các dự án của riêng mình.
04. 195 biểu tượng PSD cờ phẳng
Một bộ biểu tượng PSD tuyệt vời dành cho trang web có thể được sử dụng khi phát triển trang web quốc tế, cửa hàng trực tuyến hoặc blog du lịch. Bộ này bao gồm 195 biểu tượng góc tròn miễn phí.
05. Bộ biểu tượng giao diện người dùng Metro
Nếu bạn là người hâm mộ Windows 8 thì bạn sẽ muốn xem gói biểu tượng miễn phí này. Nó bao gồm 700 biểu tượng được thiết kế đẹp mắt có thể được sử dụng miễn phí trong bất kỳ loại dự án nào.
06. Biểu tượng giao diện người dùng hiện đại
Một bộ biểu tượng miễn phí khác có thể được sử dụng khi tạo giao diện người dùng cho phần mềm Windows hoặc Android/iOS. Khi tải xuống bộ này, bạn sẽ nhận được 1000 biểu tượng phẳng được làm thủ công, bao gồm cả biểu tượng cho màn ứng dụng trong Windows Phone.
07. Biểu tượng hoàn hảo 350 pixel
Một bộ đáng kinh ngạc gồm 350 biểu tượng hoàn toàn rõ ràng dành cho ứng dụng hoặc trang web. Hơn nữa, chúng có thể được thay đổi kích thước mà không làm giảm chất lượng.
08. 80 biểu tượng nhỏ
80 biểu tượng thu nhỏ hoàn toàn rõ ràng có thể được tải xuống ở cả định dạng PSD và dưới dạng phông chữ mang tính biểu tượng. Những biểu tượng xã hội PSD gọn gàng và tinh tế này hoàn hảo cho bất kỳ loại dự án nào.
09. Đồ họa vector biểu tượng web đơn giản và thiết thực
Rất nhiều biểu tượng hữu ích có thể được sử dụng trong các dự án cá nhân và thương mại.
10. Biểu tượng phẳng miễn phí
Một bộ biểu tượng được tạo theo phong cách phẳng, bao gồm lịch, email, đồng hồ, bản đồ và nhiều thứ khác.
11. Biểu tượng đơn sắc
Một bộ bao gồm 108 biểu tượng đơn sắc độc đáo được làm theo phong cách tối giản. Tất cả chúng đều có sẵn ở định dạng PNG với kích thước 32 x 32.
12. Biểu tượng đo lường
Một bộ sưu tập miễn phí các thiết kế theo phong cách Metro mà bạn có thể sử dụng trong các ứng dụng và dự án web của riêng mình. Các biểu tượng truyền thông xã hội PSD miễn phí cho cả mục đích sử dụng cá nhân và thương mại. Kho lưu trữ không chỉ chứa các định dạng PSD, SVG, ESP và AI mà còn cả phông chữ web.
13. Biểu tượng thanh tab iOS 7
Một bộ biểu tượng trang nhã lấy cảm hứng từ iOS 7 mà bạn có thể sử dụng trong các ứng dụng của riêng mình. Bạn có thể tải xuống các biểu tượng ở các định dạng sau: PSD, AI và ESP.
14. Bộ biểu tượng Pika Chunky
Các biểu tượng theo phong cách Pika được tạo bởi hãng Dutch Icon đến từ Đan Mạch. Bộ này bao gồm 42 biểu tượng hoàn toàn rõ ràng.
15. mang tính biểu tượng
Một bộ biểu tượng đơn giản nhưng hấp dẫn khác lý tưởng cho các thiết kế tối giản. Iconic là một bộ mã nguồn mở có thể tải xuống ở định dạng PNG, SVG, SWC và các định dạng khác, cho phép bạn điều chỉnh chúng cho phù hợp với thiết kế của riêng mình.
16. 44 sắc thái của biểu tượng miễn phí
Bộ 44 biểu tượng. Nó chứa các biểu tượng PSD cho diễn đàn, cho phép bạn dễ dàng chỉnh sửa và điều chỉnh chúng cho phù hợp với dự án của riêng bạn.
17. Bộ biểu tượng token
Mã thông báo bao gồm 128 biểu tượng độc đáo, có sẵn ở định dạng ICO ở các kích thước 16 x 16 pixel, 32 x 32 pixel và 256 x 256 pixel và ở định dạng PNG ở kích thước 128 x 128 pixel. Mỗi biểu tượng được trình bày ở các phiên bản tối và sáng và được bổ sung bằng tệp PSD.
18. Biểu tượng phẳng (PSD)
Các biểu tượng đầy màu sắc theo phong cách phẳng có thể được tải xuống ở định dạng PSD và chỉnh sửa cho phù hợp với nhu cầu của riêng bạn.
19. Bộ biểu tượng 32px miễn phí
Một bộ trong đó bạn sẽ tìm thấy biểu tượng PSD cho mọi mục đích: Skype, Facebook, Twitter, RSS, tách cà phê, “thích” và nhiều hơn thế nữa.
20. 48 biểu tượng thiết kế phẳng
Nếu bạn là người yêu thích sự tối giản thì chắc chắn bạn sẽ thích bộ sản phẩm này. Nó bao gồm 48 biểu tượng miễn phí phản ánh các nhiệm vụ văn phòng, khía cạnh xã hội cũng như du lịch. Tất cả chúng đều ở định dạng AI và PNG, đồng thời có thể thu nhỏ kích thước mà không làm giảm chất lượng.
21. Bộ biểu tượng Plex
Bộ này bao gồm hơn 100 biểu tượng, bao gồm lịch, phần mềm chống vi-rút, đồng hồ, email, ứng dụng Microsoft Office, mạng xã hội, v.v.
22.Vector mini miễn phí
Một bộ hơn 1000 biểu tượng PSD được thiết kế bởi nhóm Icojam. Tất cả chúng cũng được trình bày ở định dạng PNG. Chúng lý tưởng để sử dụng khi phát triển một trang web mới vì chúng được sử dụng miễn phí cho cả dự án cá nhân và thương mại.
23. Eldorado mini miễn phí
Một bộ sưu tập biểu tượng nhỏ khác từ Icojam, có hơn 1200 biểu tượng với kích thước 40 x 40 pixel.
Mặc dù những thay đổi trong xu hướng thiết kế giao diện người dùng năm nay không quá ấn tượng như những năm trước nhưng rõ ràng chúng đã trở nên tinh tế hơn, chuyên biệt hơn, bao trùm và kết hợp hoàn toàn tất cả các phong cách tốt nhất từ các biểu tượng phổ biến trước đây.
Năm nay có thể không phải là một năm đặc biệt thành công đối với thiết kế biểu tượng, tuy nhiên, một số bộ thú vị đáng để bạn chú ý đã xuất hiện. Trong bài đánh giá này, tôi đề xuất xem xét 50 bộ sưu tập biểu tượng miễn phí tốt nhất (hoàn toàn theo ý kiến của tôi) đã xuất hiện trong phạm vi công cộng trong năm 2017. Tất cả các bộ đều hoàn toàn miễn phí và có sẵn để tải xuống mà không có bất kỳ hạn chế nào. Dưới mỗi hình ảnh đều có các liên kết đến các tài nguyên, bằng cách nhấp vào đó bạn có thể làm quen chi tiết với bộ biểu tượng bạn thích và nếu muốn, hãy tải xuống.
Các biểu tượng phác thảo hoặc tuyến tính rất phổ biến trong thế giới phát triển web, vì chúng được đặc trưng bởi các hình thức đặc biệt đơn giản và sự tối giản mà không làm mất đi nội dung thông tin. Ngoài ra, trong hầu hết các trường hợp, các biểu tượng được trình bày không chỉ có thể được sử dụng cho các trang web; chúng còn rất phù hợp cho các ứng dụng trên nền tảng Android và iOS.
Một bộ sưu tập thực sự khổng lồ gồm các biểu tượng chất lượng cao dành cho mọi dịp. Đến nay, có khoảng 60.000 biểu tượng ở mọi định dạng, kích thước và màu sắc. Thư viện được cập nhật và bổ sung hàng ngày, từ 3 đến 20 biểu tượng mỗi ngày.
Số lượng: 60 000 +
Định dạng: SVG, AI, EPS, PNG, PDF, Phông chữ
Gói này bao gồm 1800 biểu tượng trên nền trắng và đen ở các định dạng sau: .sketch .psd .ai .svg .eps Và .png.
Một tập hợp nhỏ các biểu tượng tuyến tính chất lượng cao ở định dạng .ai
Gói miễn phí 70 biểu tượng vector ở các định dạng .sketch .ai
Biểu tượng vector ở các định dạng AI, EPS Và SVG
Một bộ tốt gồm 90 biểu tượng phác thảo miễn phí cũng như các biểu tượng có nền đồng màu dành cho Sketch và Illustrator.
Kích thước byte
Một bộ biểu tượng miễn phí tuyệt vời ở định dạng SVG. Mỗi biểu tượng được mã hóa bằng tay trên lưới 32 x 32 và sử dụng nét SVG để có được kiểu dáng linh hoạt tối đa; điều này có nghĩa là bạn có thể tùy chỉnh trọng lượng, màu sắc, kích thước và nếu cần, làm cho các cạnh của biểu tượng tròn hoặc vuông.
Bộ này chứa 38 biểu tượng phác thảo của các công cụ chỉnh sửa hình ảnh phổ biến; các biểu tượng ở định dạng AI, EPS, SVG và PNG trong suốt (1024px) có sẵn để tải xuống miễn phí.
Một bộ tuyệt vời các biểu tượng phác thảo hoàn toàn miễn phí ở các định dạng .png .pdf .svg .sketch .ai
Một bộ nhỏ các biểu tượng nhỏ chất lượng cao.
Định dạng: AI, EPS, PNG, SVG
Kích thước: 16 x 16, 32 x 32
Biểu tượng CSS thuần túy
Phần đánh giá này trình bày các tài nguyên cung cấp quyền truy cập miễn phí vào các gói biểu tượng được phát triển bằng CSS thuần túy. Một sự thay thế tuyệt vời cho việc sử dụng hình ảnh làm biểu tượng. Để kết nối các thư viện biểu tượng như vậy, một tệp .css là đủ và phần lớn, các tài nguyên này cung cấp khả năng kết nối các bộ biểu tượng trực tiếp từ máy chủ của họ, điều này khá thuận tiện.
Bộ gồm 512 biểu tượng, thư viện được cập nhật thường xuyên.
Một thư viện nhỏ các biểu tượng sử dụng CSS thuần túy.
Bộ biểu tượng nhiều màu sắc đầy màu sắc
Một bộ gồm 30 biểu tượng tuyến tính có màu với tông màu pastel tươi mới. Bộ này bao gồm các biểu tượng ở định dạng vector (SVG) và PNG ở các kích cỡ khác nhau.
Hơn 120 biểu tượng đầy màu sắc miễn phí ở định dạng PSD
Bộ sưu tập 30 biểu tượng đẳng cự phẳng. Tất cả các biểu tượng có trong bộ này đều có thể chỉnh sửa và tùy chỉnh hoàn toàn trong Illustrator. Bao gồm nhiều kích cỡ PNG khác nhau.
Định dạng: AI, EPS, PNG
Kích thước: 57px, 114px, 228px, 456px, 912px
Bộ 24 biểu tượng nhiều màu với chủ đề thể thao dưới nước. Các biểu tượng được phân phối ở định dạng SVG và được thiết kế với tông màu nhẹ nhàng, mùa hè và khả năng mở rộng tối ưu.
Bộ biểu tượng thiết kế Material Design
Các biểu tượng như vậy nhằm mục đích trở thành tiêu chuẩn cho các ứng dụng được tạo theo phong cách thiết kế vật liệu thống nhất mà Google đã giới thiệu trong Android 5.0. Đồng thời, chúng đều phù hợp như nhau cho các ứng dụng Android, iOS và web.
250 biểu tượng ở định dạng Phác thảo
Đây là bộ hơn 900 biểu tượng Google dành cho ứng dụng Sketch. Tất cả chúng đều có nguồn gốc từ thư viện Google, được cập nhật và mở rộng định kỳ.
Biểu tượng biểu tượng và chữ tượng hình
Bộ biểu tượng miễn phí gồm nhiều biểu tượng và chữ tượng hình khác nhau.
Chủ Đề Phổ Quát - Bộ Biểu Tượng Vector
Bộ này bao gồm 100 biểu tượng vector được thiết kế dành cho thiết kế web hiện đại, các biểu tượng được trình bày ở định dạng SVG, do đó bạn có thể chỉnh sửa, thay đổi kích thước và thay đổi màu sắc của biểu tượng cho đến khi đạt được kết quả như mong muốn.
Bộ 90 icon dễ thương, đa năng các dạng .sketch Và .ai
Bộ biểu tượng miễn phí ở các định dạng PSD, AI, EPS, PDF, SVG, Sketch, Webfont
Một bộ 70 biểu tượng cơ bản miễn phí được thiết kế đẹp mắt với hai phiên bản dành cho nền sáng và tối. Bao gồm các tệp AI và SKETCH.
Một thư viện miễn phí gồm 100 biểu tượng phông chữ, kho lưu trữ cũng bao gồm tất cả các mã cho trang demo, định dạng phông chữ web và tệp .SVG.
Gói UI UI bao gồm 100 biểu tượng vector được thiết kế dành cho giao diện người dùng, biểu tượng SVG, đường viền và phiên bản màu. Bạn có thể tự do sử dụng các biểu tượng này trong các dự án cá nhân và thương mại của mình.
Bộ biểu tượng đồ họa và thiết kế web
Bộ này chứa 33 biểu tượng vector có thể mở rộng hoàn toàn theo kiểu phác thảo. Mỗi biểu tượng đều có sẵn ở định dạng EPS, AI, PSD, PNG và SVG.
25 Biểu tượng từ danh mục Thiết kế Hình dạng
Một bộ biểu tượng thủ công đẹp mắt đầy ấn tượng, bao gồm 25 biểu tượng dễ chỉnh sửa và sẵn sàng sử dụng, hoàn toàn miễn phí. Có hai tùy chọn màu sắc (xoài & đá) và tất cả các định dạng tiện lợi: AI, EPS, SVG và PNG.
Bạn có thể sử dụng các biểu tượng này cho các dự án cá nhân và thương mại.
Định dạng: AI, EPS, SVG, PNG
Kích thước: 16 x 16, 32 x 32
Bộ biểu tượng công cụ nghệ thuật
Bộ biểu tượng miễn phí chứa các tệp vectơ ở định dạng Illustrator AI và .SVG và PNG, có sẵn ở cả kiểu màu và đường nét, với 5 kích cỡ (32px, 64px, 128px, 256px và 512px)
Các biểu tượng được trình bày ở tất cả các định dạng tiện lợi: EPS, AI, SVG và PNG.
Bộ biểu tượng phẳng
Phần này trình bày các bộ biểu tượng miễn phí về nhiều chủ đề khác nhau theo truyền thống tốt nhất về phong cách phẳng. Sử dụng biểu tượng phẳng trong thiết kế sẽ giúp trang web hoặc ứng dụng của bạn trở nên phong cách, hiện đại và thân thiện với người dùng hơn.
đốm màu
Bộ miễn phí hơn 1000 biểu tượng có màu sắc tươi sáng, được trình bày ở các định dạng (AI, PSD & SVG)
Đường phẳng – Bộ biểu tượng UX & Thương mại điện tử
83 biểu tượng phong cách phẳng cho giao diện người dùng và thương mại điện tử
Một thư viện biểu tượng thực sự khổng lồ với nhiều phong cách khác nhau dành cho mục đích sử dụng cá nhân và thương mại, bao gồm nhiều lựa chọn biểu tượng thiết kế phẳng. Các biểu tượng có sẵn miễn phí ở các kích cỡ khác nhau lên tới 72px và ở định dạng PNG. Bạn có thể tải trọn bộ gói hoặc từng icon bạn thích riêng lẻ sau khi chọn được dung lượng mình cần
Một bộ biểu tượng để thiết kế không gian làm việc được cung cấp miễn phí ở định dạng AI & EPS.
Bộ này chứa 70 biểu tượng giao diện người dùng khác nhau, ở định dạng SVG và PNG.
Bộ biểu tượng kinh doanh và thương mại điện tử
Một bộ gồm 36 biểu tượng tiền và ngân hàng miễn phí, những biểu tượng kiểu phẳng này hoàn hảo cho các ứng dụng hoặc trang web liên quan đến ngân hàng. Các biểu tượng có dạng vector (AI, PSD, EPS, PNG & SVG) và do đó rất dễ chỉnh sửa và thay đổi.
Được thiết kế theo phong cách phẳng, bộ này bao gồm 50 biểu tượng sống động bao gồm tất cả các lĩnh vực chính của thương mại điện tử, bao gồm biểu tượng trạng thái giỏ hàng, biểu tượng phương thức thanh toán, biểu tượng giao hàng, biểu tượng danh mục mua sắm và nhiều hơn thế nữa. Các biểu tượng được trình bày ở hai định dạng: SVG và PNG, bạn có thể thoải mái sử dụng chúng trong các dự án cá nhân và thương mại của mình.
50 biểu tượng kinh doanh kiểu phẳng đầy màu sắc, được trình bày ở định dạng AI và SVG, vì vậy chúng có thể được thu nhỏ vô hạn mà không làm giảm chất lượng hình ảnh, lý tưởng cho các thiết kế web đáp ứng. Bạn có thể tự do sử dụng chúng trong các dự án cá nhân và thương mại của mình.
Một bộ miễn phí gồm 40 biểu tượng vector thương mại điện tử. Phiên bản miễn phí chứa các tệp Adobe Illustrator (.ai), PDF và Encapsulated PostScript (.eps).
Bộ biểu tượng theo chủ đề thời tiết
Gói biểu tượng theo chủ đề thời tiết chứa 30 biểu tượng được hiển thị đẹp mắt trong .png Và .sketch. Hoàn toàn phù hợp với thiết kế của các ứng dụng và trang web thời tiết.
Gói phông chữ biểu tượng CSS lớn với 222 biểu tượng thời tiết, sẵn sàng cắm vào Bootstrap hoặc bất kỳ dự án nào khác cần biểu tượng thời tiết chất lượng cao. Bộ này được cập nhật và mở rộng thường xuyên.
Tất nhiên, các tài nguyên được trình bày trong quá trình lựa chọn chỉ là một phần nhỏ trong toàn bộ các phát triển thiết kế đa dạng đã được trình bày trước đó và đã xuất hiện trong năm nay. Hầu hết các tài nguyên phổ biến và lâu đời không cần giới thiệu, vì vậy trong bài đánh giá này, tôi đã cố gắng làm nổi bật các tác phẩm tương đối mới và chất lượng cao. Tôi hy vọng nó hữu ích cho ai đó.
Với tất cả sự tôn trọng, Andrew
Các biểu tượng bạn tìm thấy trên các tài nguyên này cũng có thể được sử dụng để minh họa thông tin trong trình chiếu, trang trí danh thiếp, thực đơn, tờ rơi, v.v.
Chúng tôi đã viết rằng các biểu tượng trên các trang này là miễn phí nhưng vẫn chú ý đến điều kiện tải xuống vì chúng có thể thay đổi bất kỳ lúc nào.
01. Tạp chí đập phá
22. PixelsMarket
26. Bản tóm tắt
Blugraphic – Tùy chọn biểu tượng PSD, PNG và vector. Tìm kiếm bị giới hạn bởi thẻ nhưng bạn có thể đăng ký để nhận lựa chọn miễn phí qua email mỗi tuần.
27. Biểu tượng Sốc
Icon Shock - hàng nghìn biểu tượng miễn phí cho mục đích sử dụng cá nhân. Để sử dụng hình ảnh trong dự án thương mại, bạn cần thanh toán một lần.
28. Tác giả CSS
CSS Author cung cấp bản tổng hợp hàng tuần về các biểu tượng miễn phí tốt nhất trên web.
29. Đuôi sáng tạo
Muốn có biểu tượng mới? Creative Tail có các bộ dụng cụ mà bạn sẽ không tìm thấy ở bất kỳ nơi nào khác.
30. Tải xuống hoàn toàn miễn phí
All-Free-Download cung cấp khả năng tìm kiếm dễ dàng và tải xuống trực tiếp PSD, PNG và vectơ.
31. Biểu tượng cái tôi
Biểu tượng Ego cung cấp hơn 1500 biểu tượng cao cấp và 100 biểu tượng vector miễn phí. Đồng thời truy cập các trang con bằng cách nhấp vào các nút thanh điều hướng trên cùng.
32. Thung lũng ngoài hành tinh
AlienValley cung cấp nhiều loại biểu tượng chất lượng cao để đổi lấy địa chỉ email của bạn.
33. Giấc mơ
Dreamstale cung cấp cho bạn một số biểu tượng cao cấp miễn phí tuyệt vời có ghi công.
34.DuckFiles
35. 1001 lượt tải xuống miễn phí
1001 Tải xuống miễn phí chuyên về các biểu tượng phẳng có nhiều tùy chọn đẹp mắt và độc đáo.
36. Đồ họaBay
37.Pixeden
Trên Pixeden, bạn có thể tìm kiếm các biểu tượng ở nhiều kích cỡ. Có nhiều lựa chọn từ 16x16 đến 512x512 ở định dạng PNG.
38. Danh từDự án
NounProject là một công cụ tìm kiếm thuận tiện, tải dễ dàng và có các biểu tượng chất lượng cao. Một liên kết đến tác giả là cần thiết. Tư cách thành viên có tính phí hàng tháng sẽ loại bỏ các hạn chế tải xuống.
39. Iconmonstr
Iconmonstr cung cấp các biểu tượng ở nhiều kích cỡ khác nhau mà không cần ghi công.
40. Tấm kết hợp
Thiết kế đáp ứng là một chủ đề phổ biến. Màn hình từ lâu đã vượt xa độ phân giải tiêu chuẩn và các trang web có thể được xem trên cả thiết bị cỡ lòng bàn tay và màn hình lớn. Trang web phải trông đẹp như nhau bất kể kích thước thiết bị và mật độ pixel. Có nhiều kỹ thuật và công nghệ khác nhau để điều chỉnh thiết kế và nội dung. Theo tôi, đồ họa vector, SVG là một trong những chủ đề thú vị nhất theo hướng này.
Đồ họa SVG thuận tiện để sử dụng cho các biểu tượng; chúng sẽ không trông như xà phòng trên các thiết bị retina và có thể kéo dài mà không làm giảm chất lượng.
Ví dụ: đây là một sprite SVG có 4 kích cỡ khác nhau, kích thước gốc là 32px:
SVG thực hiện tốt công việc này và rất phù hợp để sử dụng trong các bố cục đáp ứng.
Bạn có thể lấy các biểu tượng để thiết kế từ các bộ làm sẵn hoặc tự vẽ.
Bộ biểu tượng làm sẵn
iconmelon.com
Bộ sưu tập lớn các biểu tượng về các chủ đề khác nhau. Các biểu tượng đã tải được đề xuất chèn vào HTML bằng cách sử dụng .
icomoon.io
Công cụ thuận tiện nhất. Bạn không chỉ có thể chọn và tải xuống các biểu tượng làm sẵn mà còn có thể tải lên biểu tượng của riêng mình và tải chúng dưới dạng phông chữ và/hoặc hình ảnh. Cùng với sprite, bạn được đề nghị tải xuống phiên bản PNG của nó.
Flaticon.com
Bộ sưu tập lớn, các biểu tượng được chia thành các danh mục một cách thuận tiện. Các biểu tượng đã chọn có thể được tải xuống ở các định dạng riêng lẻ (phông chữ, SVG, PNG) hoặc tất cả cùng một lúc.
Chúng tôi tự vẽ
Để tạo bộ biểu tượng của riêng bạn, bạn sẽ cần một trình soạn thảo vector:
- Theo tôi thì Adobe Illustrator là tốt nhất. 599 RUB/tháng khi đăng ký Creative Cloud;
- Inkscape miễn phí và không thân thiện lắm với người dùng;
- Phác thảo - dành cho Mac OS, 79,99 USD. Có một số vấn đề với việc vector hóa các nét, nhưng nhìn chung khá thuận tiện.
Giảm cân
Tệp SVG đã hoàn thành thường chứa nhiều nội dung không cần thiết, nhưng đồng thời cũng có khả năng tối ưu hóa rất tốt. Các thuộc tính, dấu cách và dấu gạch nối không cần thiết sẽ bị xóa khỏi mã và số lượng ký tự sau dấu chấm sẽ bị giảm về số lượng. Trọng lượng tập tin giảm 30-50%. Công cụ tối ưu hóa:
càu nhàu-svgmin- nhiệm vụ cho Grunt sử dụng svgo. Trong trường hợp này, bản thân các tệp sẽ được lấy từ thư mục nguồn, được tối ưu hóa và lưu trữ trong thư mục kết quả. Rất thoải mái.
Phông chữ Sprite hay biểu tượng?
Phông chữ này là một sự thay thế thuận tiện cho sprite. Không cần phải bận tâm đến lưới và cách sắp xếp các biểu tượng; việc thêm các biểu tượng mới sẽ rất thuận tiện, mặc dù điều này đòi hỏi các công cụ bổ sung.
Sử dụng phông chữ, bạn không chỉ có thể tạo các biểu tượng một màu mà còn có thể tạo các biểu tượng nhiều màu.
Bạn có thể tạo phông chữ của riêng mình, ví dụ: trên trang web icomoon.io/app/. Trình tự hành động gần đúng:
- Chọn các biểu tượng từ một bộ và/hoặc tải lên biểu tượng của riêng bạn.
- Bấm vào nút Phông chữ bên dưới.
- Ở bước này, bạn có thể gán lại ký hiệu cho biểu tượng hoặc tải ngay phông chữ thu được về.
Cùng với phông chữ ở bốn định dạng (.woff, .svg, .ttf, .eot), CSS và tệp demo được tải xuống.
Phông chữ nhúng hoạt động ngay cả trong IE 8 nhưng gặp sự cố hỗ trợ không mong muốn trong một số trình duyệt hiện đại. Opera Mini hoàn toàn không hỗ trợ phông chữ tùy chỉnh, Firefox yêu cầu phép thuật cho máy chủ chứa phông chữ (được giải quyết bằng base64), Chrome có thể dỡ phông chữ nếu bạn để tab mở trong thời gian dài:
Ngoài ra, trong Chrome trên Windows7, một trang có phông chữ nhúng có thể bị đóng băng khi mở và trong một số trình duyệt khác, thay vì biểu tượng, mọi thứ có thể xuất hiện:
Hình ảnh từ bài viết của Chris Coher Icon System with SVG Sprites. Tôi đã từng nhìn thấy chữ tượng hình ở cùng một chỗ, nhưng bây giờ là SVG nên tôi không thể chụp ảnh màn hình. Nhân tiện, các thủ thuật CSS sử dụng SVG rất tích cực trong thiết kế mới của nó và các nhà phát triển Codepen đã từ bỏ việc sử dụng phông chữ biểu tượng để chuyển sang sử dụng SVG trong thiết kế trình soạn thảo mới.
Mặc dù dễ sử dụng nhưng các vấn đề về hỗ trợ phông chữ hiện buộc chúng ta phải chọn biểu tượng SVG.
Tôi hy vọng rằng trong tương lai phông chữ nhúng sẽ được hỗ trợ tốt hơn.
Các cách khác nhau để chèn SVG vào một trang là gì?
Ma
.icon ( hình nền: url(your.svg); )Ưu điểm:
- mã ngắn dễ đọc;
- hình ảnh được lưu trữ;
Nhược điểm:
- yêu cầu đến máy chủ;
- trong các Opera cũ hơn, việc hỗ trợ SVG nền rất lạ: các vấn đề có thể phát sinh khi thêm khung vào một phần tử có nền SVG và trong Opera Mini chỉ có các nền không có viewBox hoạt động;
- các biểu tượng trong sprite không có sẵn cho kiểu trang;
- Sprite lớn có thể gây ra vấn đề về hiệu suất.
Base64 trong URI dữ liệu
.icon ( hình nền: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...); )Ưu điểm:
- không có yêu cầu đến máy chủ.
- hỗ trợ trình duyệt tốt: mọi thứ ngoại trừ Opera trên Presto và IE cũ.
Nhược điểm:
- hình ảnh không được lưu vào bộ nhớ đệm và được hiển thị lại mỗi lần;
- dòng dài trong CSS;
- không thể đọc được: mã không rõ nó chứa gì;
- hình ảnh được mã hóa có thể nặng hơn hình ảnh gốc;
- cần có các công cụ bổ sung để mã hóa/giải mã;
- biểu tượng không có sẵn cho kiểu trang.
