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ặcpatch
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ànhminor
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
Tự mình thử »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à fa
0 đượ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 fa
1, fa
2 hoặc fa
3 đượ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
Tự mình thử »Lớp fa
4 xoay bất kỳ biểu tượng nào và lớp fa
5 xoay bất kỳ biểu tượng nào theo 8 bước
Ví dụ
Đoạn mã sau
Kết quả trong
Tự mình thử »Ghi chú. IE8 và IE9 không hỗ trợ hoạt hình CSS3
Các lớp fa
6 và fa
7 được sử dụng để xoay và lật các biểu tượng
Ví dụ
Đoạn mã sau
Kết quả trong
Tự mình thử »Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp fa
8 trên biểu tượng gốc, lớp fa
9 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