Font Awesome có phải là CSS không?

Font Awesome là bộ công cụ và thư viện biểu tượng của Internet, được sử dụng bởi hàng triệu nhà thiết kế, nhà phát triển và người tạo nội dung

Tài liệu

Tìm hiểu cách bắt đầu với Phông chữ tuyệt vời, sau đó tìm hiểu sâu hơn về các chủ đề nâng cao và khác

Tài liệu cho phiên bản 6

Font Awesome 5, 4 (hoặc 3) đã đi đâu?

Giờ đây, Font Awesome 6 đã được phát hành, chúng tôi đánh dấu phiên bản 5 là Hỗ trợ dài hạn (LTS). Phiên bản 5 sẽ chỉ sửa các lỗi nghiêm trọng. Phiên bản 3 và 4 hiện đã hết hạn sử dụng và chúng tôi không có kế hoạch phát hành thêm bất kỳ phiên bản nào của 4. x hoặc 3. x

Bạn có thể xem danh sách đầy đủ các phiên bản trên trang Phiên bản của chúng tôi

Thay đổi nhật ký

Nhật ký thay đổi cho các bản phát hành hiện có sẵn trực tiếp trên trang web của chúng tôi

Bạn đang tìm phiên bản cũ hơn của Phông chữ Tuyệt vời?

nâng cấp

Thỉnh thoảng chúng tôi sẽ có hướng dẫn nâng cấp đặc biệt từ phiên bản này sang phiên bản tiếp theo

• Hướng dẫn nâng cấp web
• Hướng dẫn nâng cấp máy tính để bàn

quy tắc ứng xử

Chúng tôi sẽ cư xử với chính mình nếu bạn cư xử với chính mình. Để biết thêm chi tiết, hãy xem CODE_OF_CONDUCT của chúng tôi. md

Đóng góp

Vui lòng đọc qua hướng dẫn đóng góp của chúng tôi. Bao gồm là hướng dẫn cho các vấn đề mở

lập phiên bản

Phông chữ tuyệt vời sẽ được duy trì theo nguyên tắc Phiên bản ngữ nghĩa càng nhiều càng tốt. Các bản phát hành sẽ được đánh số theo định dạng sau

..

Để biết thêm thông tin về SemVer, vui lòng truy cập https. //semver. tổ chức

Phiên bản chính "6" là một phần của bản phát hành ô. Nó bao gồm nhiều loại tệp và công nghệ khác nhau. Do đó, chúng tôi khác với SemVer bình thường theo những cách sau

• Bất kỳ bản phát hành nào cũng có thể cập nhật thiết kế, giao diện hoặc nhãn hiệu của một biểu tượng hiện có
• Chúng tôi sẽ không bao giờ cố ý phát hành bản cập nhật phiên bản patch phá vỡ khả năng tương thích ngược
• Bản phát hành minor có thể bao gồm các thay đổi không tương thích ngược nhưng chúng tôi sẽ viết hướng dẫn nâng cấp rõ ràng trong phần NÂNG CẤP. md
• Bản phát hành minor hoặc patch sẽ không bao giờ xóa các biểu tượng
• Các bản sửa lỗi sẽ được giải quyết dưới dạng bản phát hành patch trừ khi chúng bao gồm tính không tương thích ngược thì chúng sẽ là bản phát hành minor

Giấy phép

Font Awesome Free miễn phí, mã nguồn mở và thân thiện với GPL. Bạn có thể sử dụng nó cho các dự án thương mại, dự án nguồn mở hoặc hầu như bất cứ điều gì bạn muốn

• Biểu tượng — CC BY 4. 0 Giấy phép
  • Trong bộ Font Awesome Free download thì CC BY 4. 0 áp dụng cho tất cả các biểu tượng được đóng gói dưới dạng. svg và. các loại tệp js
• Phông chữ — SIL OFL 1. 1 giấy phép
  • Trong bản tải xuống Font Awesome Free, giấy phép SIL OLF áp dụng cho tất cả các biểu tượng được đóng gói dưới dạng tệp phông chữ web và máy tính để bàn
• Mã — Giấy phép MIT
  • Trong bản tải xuống Font Awesome Free, giấy phép MIT áp dụng cho tất cả các tệp không phải phông chữ và không phải biểu tượng

Giấy phép MIT, SIL OLF và CC BY yêu cầu ghi công. Các tệp Phông chữ Tuyệt vời Miễn phí đã tải xuống đã chứa các nhận xét được nhúng với đầy đủ thuộc tính, vì vậy bạn không cần phải làm gì thêm khi sử dụng các tệp này một cách bình thường

Chúng tôi đã giữ các nhận xét ghi công ngắn gọn, vì vậy chúng tôi yêu cầu bạn không tích cực làm việc để xóa chúng khỏi các tệp, đặc biệt là mã. Chúng là một cách tuyệt vời để mọi người tìm hiểu về Font Awesome

Bạn không thể sử dụng văn bản làm hình nền, nhưng bạn có thể sử dụng các lớp giả :before hoặc :after để đặt một ký tự văn bản vào nơi bạn muốn mà không phải thêm tất cả các loại đánh dấu bổ sung lộn xộn

Đảm bảo đặt position:relative trên trình bao bọc văn bản thực tế của bạn để định vị hoạt động

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

BIÊN TẬP

Font Awesome v5 sử dụng các tên phông chữ khác với các phiên bản cũ hơn

• Đối với FontAwesome v5, Phiên bản miễn phí, hãy sử dụng. font-family: "Font Awesome 5 Free"
• Đối với FontAwesome v5, Phiên bản Pro, hãy sử dụng. font-family: "Font Awesome 5 Pro"

Lưu ý rằng bạn cũng nên đặt thuộc tính font-weight tương tự (có vẻ là 900)

Một cách khác để tìm tên phông chữ là nhấp chuột phải vào biểu tượng tuyệt vời của phông chữ mẫu trên trang của bạn và lấy tên phông chữ (giống như cách tìm mã biểu tượng utf-8, nhưng lưu ý rằng bạn có thể tìm thấy nó trên :before)

Font Awesome được thiết kế để sử dụng với các phần tử nội tuyến. Các phần tử và được sử dụng rộng rãi cho các biểu tượng

Cũng lưu ý rằng nếu bạn thay đổi cỡ chữ hoặc màu của vùng chứa biểu tượng, biểu tượng sẽ thay đổi. Điều tương tự cũng xảy ra với bóng và bất kỳ thứ gì khác được kế thừa bằng CSS

Các lớp fa-lg (tăng 33%), fa-2x, fa-3x, fa-4x hoặc fa-5x được sử dụng để tăng kích thước biểu tượng so với vùng chứa của chúng

Ví dụ

Đoạn mã sau

Kết quả trong

Mẹo. Nếu các biểu tượng của bạn bị cắt ở trên và dưới, hãy tăng chiều cao dòng

Các lớp fa-ul và fa0 được sử dụng để thay thế các dấu đầu dòng mặc định trong danh sách không có thứ tự

Ví dụ

Đoạn mã sau

 
• Liệt kê các biểu tượng

 
• Liệt kê các biểu tượng

 
• Liệt kê các biểu tượng

Kết quả trong

• Liệt kê các biểu tượng
• Liệt kê các biểu tượng
• Liệt kê các biểu tượng

Các lớp fa1, fa2 hoặc fa3 được sử dụng cho trích dẫn kéo hoặc biểu tượng bài viết

Ví dụ

Đoạn mã sau

Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Kết quả trong

Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Lớp fa4 xoay bất kỳ biểu tượng nào và lớp fa5 xoay bất kỳ biểu tượng nào theo 8 bước

Ví dụ

Đoạn mã sau

Kết quả trong

Ghi chú. IE8 và IE9 không hỗ trợ hoạt hình CSS3

Các lớp fa6 và fa7 được sử dụng để xoay và lật các biểu tượng

Ví dụ

Đoạn mã sau

Kết quả trong

Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp fa8 trên biểu tượng gốc, lớp fa9 cho biểu tượng có kích thước thông thường và 0 cho biểu tượng lớn hơn

Lớp 1 có thể được sử dụng làm màu biểu tượng thay thế. Bạn cũng có thể thêm các lớp biểu tượng lớn hơn vào lớp cha để kiểm soát thêm kích thước

Ví dụ

Đoạn mã sau

 
 

fa-twitter trên fa-circle-thin

 
 

fa-twitter (nghịch đảo) trên fa-circle

 
 

fa-ban trên fa-camera

Kết quả trong

fa-twitter trên fa-circle-thin
fa-twitter (nghịch đảo) trên fa-circle
fa-ban trên fa-camera

Lớp 2 được sử dụng để đặt biểu tượng ở chiều rộng cố định. Lớp này hữu ích khi độ rộng biểu tượng khác nhau làm lệch hướng. Đặc biệt hữu ích trong danh sách điều hướng Bootstrap và nhóm danh sách

Bạn có thể sử dụng Phông chữ tuyệt vời trong CSS không?

Làm cách nào để đặt Phông chữ Tuyệt vời trong CSS?

Phông chữ tuyệt vời trong HTML là gì?

Làm cách nào để thêm biểu tượng bằng CSS?