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à 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 biểu tượng trích dẫn hoặc 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 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 với 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 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
Tự mình thử »Để 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
cấm fa máy ảnh
Kết quả trong
fa-twitter trên fa-circle-thin
fa-twitter [nghịch đảo] trên fa-circle
fa-cấm trên fa-camera