Biểu tượng Web - Giới thiệu

Biểu tượng là một biểu tượng được sử dụng để biểu thị một hành động cụ thể hoặc một khả năng trên một trang web. Các biểu tượng được sử dụng trong các tài liệu cũng như ứng dụng và chúng có thể được chọn hoặc không chọn được. Ví dụ, hình ảnh mà chúng ta thấy trên các nút của ứng dụng đều là biểu tượng và các nút này có thể chọn được. Tương tự, khi chúng tôi sử dụng một biểu tượng làm biểu trưng của công ty, nó thường không thể chọn được.

Trong môi trường Windows, nếu chúng ta tắt âm lượng hệ thống, nó sẽ được hiển thị với sự trợ giúp của một biểu tượng, như hình dưới đây.

Sử dụng các biểu tượng web, chúng ta có thể đại diện cho một trang đang tải, một tùy chọn bị vô hiệu hóa, một liên kết, một chuyển hướng, v.v. Các biểu tượng này có thể được lật, xoay, thay đổi kích thước, viền, đảo ngược và tô màu.

Phông chữ Biểu tượng

Biểu tượng Phông chữ chứa các biểu tượng và glyph. Khi bạn tải một phông chữ mong muốn, bạn có thể sử dụng bất kỳ biểu tượng nào được cung cấp bởi phông chữ đó bằng cách sử dụng tên lớp của biểu tượng. Chúng tôi cũng có thể áp dụng các màu khác nhau cho các biểu tượng và thay đổi kích thước của chúng bằng cách sử dụng các thuộc tính CSS. Có một số thư viện biểu tượng (phông chữ) cung cấp các biểu tượng. Hướng dẫn này tập trung vào ba phông chữ chính, đó là -

Phông chữ tuyệt vời
Bootstrap Glyphicons
Biểu tượng tài liệu của Google

Phông chữ tuyệt vời

Phông chữ này cung cấp 519 biểu tượng vector có thể mở rộng miễn phí. Thư viện này hoàn toàn miễn phí, cho cả mục đích sử dụng cá nhân cũng như thương mại. Các biểu tượng này có thể được tùy chỉnh dễ dàng. Ban đầu, chúng được phát triển cho Bootstrap.

Bootstrap Glyphicons

Đây là một thư viện các biểu tượng đơn sắc có sẵn ở định dạng ảnh raster, định dạng ảnh vectơ và dưới dạng phông chữ. Nó cung cấp hơn 250 glyph ở định dạng phông chữ. Bạn có thể sử dụng các phông chữ này trong các dự án web của mình. Các biểu tượng này không miễn phí, tuy nhiên bạn có thể sử dụng chúng trong các dự án dựa trên Bootstrap mà không cần phải mua chúng.

Biểu tượng tài liệu của Google

Google cung cấp khoảng 750 biểu tượng được thiết kế theo "nguyên tắc thiết kế material design" và những biểu tượng này được gọi là Material Designcác biểu tượng. Các biểu tượng này rất đơn giản và chúng hỗ trợ tất cả các trình duyệt web hiện đại. Vì các biểu tượng này dựa trên vector nên chúng cũng có thể mở rộng. Để sử dụng các biểu tượng này, chúng ta phải tải phông chữ (thư viện)material-icons.