Font Awesome: Hướng dẫn thư viện hoàn chỉnh

Biểu tượng miễn phí phông chữ tuyệt vời: nó là gì và những gì nó được sử dụng cho. Cách kết nối các biểu tượng với trang web. Ưu điểm và bất lợi của thư viện.

Bộ biểu tượng Awesome Set: Hướng dẫn cuối cùng

Font Awesome là một tập hợp các phông chữ và biểu tượng dựa trên CSS và ít hơn. Công cụ này cho phép bạn nhanh chóng kết nối tất cả các loại biểu tượng cho trang web, cải thiện đáng kể thiết kế và khả năng sử dụng của nó. Nó là đủ để chèn một vài dòng mã.

Phông chữ tuyệt vời cung cấp cho bạn các biểu tượng vectơ có thể mở rộng mà bạn có thể dễ dàng cá nhân hóa - kích thước, màu sắc, bóng tối và mọi thứ khác có thể được thực hiện với CSS.

Thư viện Font Awesome có một bộ sưu tập lớn các đề xuất tốt nhất cho bạn. Bạn cải thiện dự án của bạn với các biểu tượng độc đáo. Trên thực tế, đây là một tập hợp khổng lồ của tất cả các loại biểu tượng mà bạn có thể sử dụng cho mục đích riêng của mình.

Trong fontawgie, tất cả các biểu tượng là hoàn toàn và hoàn toàn miễn phí. Thư viện được cấp phép theo Giấy phép Công cộng GNU. Điều này có nghĩa là nó có thể được sử dụng tự do trong các dự án thương mại và về nguyên tắc, ở mọi nơi.

Bộ được tạo ra bởi Dave Gandhi. Nó bao gồm các biểu tượng phương tiện truyền thông xã hội miễn phí, các biểu tượng để cải thiện giao diện người dùng và hơn thế nữa.

Thông thường, các tập lệnh phông chữ tuyệt vời phông chữ được sử dụng cùng với bootstrap và bootstrapcn. Phông chữ tuyệt vời chỉ đứng thứ hai với Google Phông chữ phổ biến.

Làm thế nào nó hoạt động

Tính năng chính là tất cả các biểu tượng tuyệt vời phông chữ không phải là hình ảnh tĩnh. Chúng ở định dạng phông chữ. Nói cách khác, đây là các phông chữ biểu tượng. Ví dụ: biểu tượng tìm kiếm hoặc logo mạng xã hội giống như các ký tự đơn giản A, B, C.

Phông chữ Biểu tượng tuyệt vời được tạo bằng các vectơ có thể mở rộng. Do đó, chúng có thể được tăng lên gần như bất kỳ kích thước nào.

Tất cả các biểu tượng có sẵn được bao gồm trong một tập tin phông chữ. Tất cả những gì bạn cần là tải tập tin này từ trang web chính thức và kết nối nó theo kiểu.

Tại sao các nhà thiết kế chọn phông chữ tuyệt vời

Phông chữ tuyệt vời có một số lợi thế:

• Kết nối nhanh. Bạn chỉ cần tải xuống một tệp đặc biệt từ trang web chính thức và kết nối nó bằng cách chỉ định đường dẫn đến mã CSS.
• Linh hoạt và khả năng mở rộng. Các biểu tượng có thể được phóng to đến bất kỳ kích thước nào. Các biểu tượng sẽ rõ ràng như thiết bị cho phép. Trong thời đại thiết kế đáp ứng, điều này rất quan trọng. Nhân tiện, vì cùng một lý do,  Phông chữ biểu tượng tuyệt vời   phù hợp cho màn hình retina.
• Cách điệu. Các biểu tượng có thể dễ dàng thay đổi về màu sắc, kích thước, bóng hoặc bất kỳ tham số bên ngoài nào khác. Nhà thiết kế có được tất cả những lợi ích của việc tạo kiểu văn bản thông thường. Bạn cũng có thể xoay các biểu tượng. Ví dụ, hiển thị lộn ngược hoặc xoay 90 độ.
• Tải nhanh của trang web. Tất cả các biểu tượng được bao gồm trong một tập tin phông chữ. Vì vậy, nó chỉ mất một yêu cầu HTTP để tải phông chữ tuyệt vời. Điều này là tuyệt vời cho hiệu suất trang web.
• Tình yêu của các trình duyệt. Font Awesome là một công cụ trình duyệt chéo. Bạn không phải lo lắng về khả năng tương thích của trình duyệt của phông chữ và biểu tượng. Họ được tất cả chúng hỗ trợ tốt. Ngay cả IE8 cũ.
• Tương thích với các khung khác nhau. Thư viện được tạo chủ yếu cho Bootstrap. Tuy nhiên, nó cũng sẽ hoạt động tốt với các khung khác.
• Một số định dạng. Công cụ này có sẵn trong các định dạng .eot, .tf, .woff và SVG. Vì vậy, phông chữ tuyệt vời được xử lý theo cách tương tự như các phông chữ web khác.
• Không yêu cầu JavaScript. Font Awesome không yêu cầu JavaScript để chạy.

Do đó, Font Awesome là một công cụ hiệu quả và thuận tiện giúp tiết kiệm đáng kể thời gian bố trí và tăng tốc trang web của bạn.

Nhược điểm của phông chữ tuyệt vời

Công cụ này cũng có nhược điểm. May mắn thay, không có nhiều trong số họ.

Đầu tiên, các biểu tượng chỉ có thể được vẽ trong một màu. Tuy nhiên, giới hạn này có thể bị phá vỡ. Ví dụ, kết hợp các biểu tượng miễn phí với nhau. Hoặc sử dụng hiệu ứng CSS

Thứ hai, thư viện Awesome phông chữ chứa quá nhiều biểu tượng và tất cả chúng đều được bao gồm trong một tệp. Nếu một nhà thiết kế hoặc thiết kế bố trí chỉ cần kết nối một vài biểu tượng, họ vẫn phải tải hoàn toàn toàn bộ thư viện. Và đây là hàng trăm ngàn biểu tượng bổ sung sẽ chiếm không gian. Tuy nhiên, có một giải pháp ở đây quá - tạo ra lắp ráp của riêng bạn, chỉ bao gồm các biểu tượng cần thiết.

Phông chữ Phiên bản tuyệt vời: 5 và 6

Font Awesome 5 đã được phát hành vào ngày 7 tháng 12 năm 2017 và ban đầu gồm 1278 biểu tượng. Phiên bản thứ năm có hai gói: miễn phí (phông chữ miễn phí tuyệt vời) và thanh toán (phông chữ tuyệt vời pro). Kế hoạch miễn phí cũng chứa các biểu tượng từ tất cả các phiên bản thứ tư. Các biểu tượng có sẵn theo Giấy phép Phông chữ AM mở 1.1, Ghi công Creative Commons 4.0 và MIT.

Font Awesome 6 là một phiên bản mới được phát hành vào nửa cuối năm 2020. Nó bao gồm các biểu tượng mới và chỉ có sẵn trong một kế hoạch trả phí.

Phông chữ tuyệt vời 6 alpha cũng đang trên đường vào năm 2021. Đây là một thế hệ thư viện biểu tượng mới khác. Ngoài các biểu tượng mới, phiên bản 6 alpha cũng thêm các kiểu mới, dịch vụ mới và các công cụ hỗ trợ. Người dùng có thể đặt hàng trước.

Kế hoạch miễn phí và trả phí: Sự khác biệt và tính năng

Bạn có thể tải các biểu tượng cho gói thuế quan miễn phí hoặc trả phí.

Kế hoạch miễn phí bao gồm hơn 1600 biểu tượng và 1 bộ. Một bộ là một tập hợp các biểu tượng, kiểu và cài đặt cho phép bạn nhanh chóng thực hiện các thay đổi mà không cần thêm mã.

Thuế chi trả:

• Bao gồm hơn 7800 biểu tượng và 20 bộ.
• Cung cấp quyền truy cập vào phông chữ Awesome Pro. Điều này có nghĩa là các biểu tượng có thể được sử dụng trong các ứng dụng di động gốc và trên máy tính của bạn (ví dụ: trong trình soạn thảo văn bản Word hoặc khi tạo bản trình bày trong PowerPoint).
• Cho phép bạn tải lên các biểu tượng của riêng bạn. Bạn có thể sử dụng các biểu tượng của riêng mình cùng hoặc thay cho các biểu tượng tuyệt vời phông chữ chính thức. Ví dụ, đây là cách bạn có thể tải lên logo công ty. Bạn có thể thực hiện các hành động tương tự với các biểu tượng của riêng bạn như với các biểu tượng cơ bản - thay đổi kiểu dáng, kích thước, màu sắc, v.v.

Cả hai phiên bản là vĩnh viễn. Đó là, họ được cung cấp một lần và mãi mãi.

Cách để kết nối phông chữ tuyệt vời

Trước hết, bạn cần phải đến trang web chính thức và tải xuống thư viện. Lưu trữ đã tải xuống phải được giải nén và các thư mục CSS và phông chữ được sao chép vào thư mục trang web của bạn.

Sau đó, đường dẫn đến tệp thư viện được chỉ định giữa các thẻ đầu. Ví dụ:

Làm thế nào để hiển thị các biểu tượng tuyệt vời phông chữ trên một trang web. Phương pháp phổ biến nhất:

1. Sử dụng HTML.

Cách dễ nhất.

Bạn cần đi đến bộ sưu tập trên trang web chính thức (FontAWESAWESAW.COM/ICONS?D=Gallery) và chọn biểu tượng bạn thích. Mỗi biểu tượng có mã cá nhân, ví dụ:. Nó là đủ để sao chép và dán nó ở đúng vị trí trong mã.

2. Qua CSS.

Để thực hiện việc này, hãy sử dụng các yếu tố giả sau hoặc trước, cũng như Unicode của biểu tượng cần thiết. Bạn có thể lấy tất cả trong cùng một thư viện. Một ví dụ về mã đó: F209.

Một ví dụ về mục nhập tệp kiểu:

DIV :: Sau {display: block; Nội dung: 'F209'; Font-Family: 'phông chữ tuyệt vời 5 miễn phí';}

Tóm lại: Tất cả các biểu tượng tuyệt vời phông chữ

Do đó, phông chữ tuyệt vời là một cách nhanh chóng và thuận tiện để thêm các biểu tượng miễn phí vào trang web của bạn. Tất cả các biểu tượng có thể dễ dàng mở rộng và không làm chậm trang web.