Font Awesome

5 Giới thiệu

Font Awesome 5

Font Awesome 5 có phiên bản CHUYÊN NGHIỆP với 7842 biểu tượng và phiên bản MIỄN PHÍ với 1588 biểu tượng. Hướng dẫn này sẽ tập trung vào phiên bản MIỄN PHÍ.

Để sử dụng 5 biểu tượng Free Font Awesome, bạn có thể chọn tải xuống Phông chữ
Thư viện tuyệt vời hoặc bạn có thể đăng ký tài khoản tại Font Awesome và nhận được một
mã (được gọi là KIT CODE) để sử dụng khi bạn thêm Font Awesome vào trang web của mình.

Chúng tôi thích phương pháp KIT CODE hơn. Sau khi nhận được mã, bạn có thể bắt đầu sử dụng
Font Awesome trên các trang web của bạn bằng cách chỉ bao gồm một dòng mã HTML:

& lt; script src = “https://kit.fontawesome.com/yourcode.js” crossorigin = “nặc danh” & gt; & lt; / script & gt;

Ví dụ

Chúng tôi nhận được mã a076d05399 và bằng cách chèn
thẻ script, với mã, chúng ta có thể bắt đầu sử dụng Font Awesome:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; script src = “https://kit.fontawesome.com/a076d05399.js” crossorigin = “nặc danh” & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt; < br />
& lt; i class = “fas fa-clock” & gt; & lt; / i & gt;

& lt; / body & gt;
& lt; / html & gt;

Kết quả là:

Hãy tự mình thử »

Lưu ý: Không cần tải xuống hoặc cài đặt!

Nhận MÃ KIT của riêng bạn

Đăng ký và nhận mã của riêng bạn miễn phí tại:

fontawesome.com

Tính năng mới trong Font Awesome 5

Điểm mới trong Font Awesome 5 là tiền tố fas ,
Font Awesome 4 sử dụng fa .

s trong fas
là viết tắt của solid và một số biểu tượng cũng có chế độ thông thường,
được chỉ định bằng cách sử dụng tiền tố far :

Ví dụ

& lt; i class = “fas fa-clock” & gt; & lt; / i & gt;
& lt; i class = “far fa-clock” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

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

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

Ví dụ

& lt; i class = “fas fa-clock” style = “font-size: 120px; color: # 2196F3” & gt; & lt; / i & gt;
& lt; i class = “far fa-clock” style = “font-size: 120px; color: # 2196F3” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng định kích thước

Các
fa-xs ,
fa-sm ,
fa-lg ,
fa-2x ,
fa-3x ,
fa-4x ,
fa-5x ,
fa-6x ,
fa-7x ,
fa-8x ,
fa-9x ,
hoặc các lớp fa-10x được sử dụng để điều chỉnh kích thước biểu tượng liên quan đến vùng chứa của chúng.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-clock fa-xs” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-sm” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-lg” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-2x” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-5x” & gt; & lt; / i & gt;
& lt; i class = “fas fa-clock fa-10x” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng danh sách

Các lớp fa-ul và fa-li đượ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:

& lt; ul class = “fa-ul” & gt;
& lt; li & gt; & lt; span class = “fa-li” & gt; & lt; i class = “fas fa-check-square” & gt; & lt; / i & gt; & lt; / span & gt; Danh sách
Mục & lt; / li & gt;
& lt; li & gt; & lt; span class = “fa-li” & gt; & lt; i class = “fas fa-spinner fa-xung” & gt; & lt; / i & gt; & lt; / span & gt ;Danh sách
Mục & lt; / li & gt;
& lt; li & gt; & lt; span class = “fa-li” & gt; & lt; i class = “fas fa-square” & gt; & lt; / i & gt; & lt; / span & gt; Danh sách
Mục & lt; / li & gt;
& lt; / ul & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng hoạt hình

Lớp fa-spin có bất kỳ biểu tượng nào để xoay và fa-xung
lớp có bất kỳ biểu tượng nào để xoay với 8 bước.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-spinner fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-circle-notch fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-sync-alt fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-cog fa-spin” & gt; & lt; / i & gt;
& lt; i class = “fas fa-cog fa-xung” & gt; & lt; / i & gt;
& lt; i
class = “fas fa-spinner fa-xung” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Lưu ý: IE8 và IE9 không hỗ trợ hoạt ảnh CSS3.

Biểu tượng được xoay và lật

Các lớp fa-Rot- * và fa-flip- * được sử dụng để xoay và lật biểu tượng.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-horse” & gt; & lt; / i & gt;
& lt; i class = “fas fa-horse fa-Rot-90” & gt; & lt; / i & gt;
& lt ; i class = “fas fa-horse fa-Rot-180” & gt; & lt; / i & gt;
& lt; i class = “fas fa-horse fa-Rot-270” & gt; & lt; / i & gt; < br /> & lt; i class = “fas fa-horse fa-flip-ngang” & gt; & lt; / i & gt;
& lt; i class = “fas fa-horse fa-flip-vertical” & gt; & lt; / i & gt;

Kết quả là:

Hãy tự mình thử »

Biểu tượng xếp chồng

Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp fa-stack trên biểu tượng chính,
Lớp fa-stack-1x cho biểu tượng có kích thước thường xuyên và fa-stack-2x cho biểu tượng lớn hơn .

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

Ví dụ

Đoạn mã sau:

& lt; span class = “fa-stack fa-lg” & gt;
& lt; i class = “fas fa-circle
fa-stack-2x “& gt; & lt; / i & gt;
& lt; i class =” fab fa-twitter fa-stack-1x fa-inverse “& gt; & lt; / i & gt;
& lt; / span & gt;
fa-twitter (nghịch đảo) trên fa-circle (solid) & lt; br & gt;

& lt; span class = “fa-stack
fa-lg “& gt;
& lt; i class =” far fa-circle fa-stack-2x “& gt; & lt; / i & gt;
& lt; i
class = “fab fa-twitter fa-stack-1x” & gt; & lt; / i & gt;
& lt; / span & gt;
fa-twitter trên fa-circle
(thông thường) & lt; br & gt;

& lt; span class = “fa-stack fa-lg” & gt;
& lt; i class = “fas fa-camera
fa-stack-1x “& gt; & lt; / i & gt;
& lt; i class =” fas fa-ban fa-stack-2x text-risk ”
style = “color: red;” & gt; & lt; / i & gt;
& lt; / span & gt;
fa-ban on fa-camera

Kết quả là:

Hãy tự mình thử »

Biểu tượng chiều rộng cố định

Cũng giống như các chữ cái và các ký tự khác, các biểu tượng có thể có các chiều rộng khác nhau và
nếu bạn cần căn chỉnh theo chiều dọc các biểu tượng như trong danh sách hoặc menu, đây có thể là
vấn đề.

Lớp fa-fw được sử dụng để đặt các biểu tượng tại
chiều rộng cố định.

Ví dụ

& lt; p & gt; Chiều rộng cố định: & lt; / p & gt;
& lt; div & gt; & lt; i class = “fas fa-arrows-alt-v fa-fw” & gt; & lt; / i & gt; Biểu tượng
1 & lt; / div & gt;
& lt; div & gt; & lt; i class = “fas fa-band-aid fa-fw” & gt; & lt; / i & gt; Biểu tượng
2 & lt; / div & gt;
& lt; div & gt; & lt; i
class = “fab fa-bluetooth-b fa-fw” & gt; & lt; / i & gt; Biểu tượng 3 & lt; / div & gt;

& lt; p & gt; without Fixed
Chiều rộng: & lt; / p & gt;
& lt; div & gt; & lt; i class = “fas fa-arrows-alt-v” & gt; & lt; / i & gt; Biểu tượng 1 & lt; / div & gt;
& lt; div & gt; & lt; i
class = “fas fa-band-aid” & gt; & lt; / i & gt; Biểu tượng 2 & lt; / div & gt;
& lt; div & gt; & lt; i class = “fab fa-bluetooth-b” & gt; & lt; / i & gt; Biểu tượng
3 & lt; / div & gt;

Kết quả là:

Hãy tự mình thử »

Các biểu tượng có viền và kéo

fa-border , fa-pull-right hoặc fa-pull-left
các lớp được sử dụng cho các dấu ngoặc kép hoặc biểu tượng bài viết.

Ví dụ

Đoạn mã sau:

& lt; i class = “fas fa-quote-left fa-3x fa-pull-left fa-border” & gt; & lt; / i & gt;
Lorem ipsum đau sit amet, consectetur adipisicing ưu tú, bởi vì eiusmod tempor incididunt out chuyển dạ và đau magna aliqua. Và một số và tối thiểu, những người không tập thể dục thậm chí cần lao động và kết quả là một người yêu cũ một chút và thoải mái. Duis aute irure dolor in repmblenderit in voluptate velit esse cillum dolore eu fugiat nulla pariesur.

Kết quả là:

không khả dụng

Hãy tự mình thử »