Giới thiệu Font Awesome 5
Phông chữ tuyệt vời 5
Font Awesome 5 có phiên bản PRO 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 biểu tượng Free Font Awesome 5, bạn có thể chọn tải xuống thư viện Font Awesome hoặc có thể đăng ký tài khoản tại Font Awesome và nhận mã (gọi là KIT CODE) để sử dụng khi thêm Font Awesome vào web của mình trang.
Chúng tôi thích cách tiếp cận 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 mình bằng cách chỉ đưa vào một dòng mã HTML:
<script src="https://kit.fontawesome.com/ yourcode .js" crossorigin="anonymous"></script>
Ví dụ
Chúng tôi đã nhận được mã a076d05399
và bằng cách chèn thẻ script, cùng với mã, chúng tôi có thể bắt đầu sử dụng Font Awesome:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
Kết quả trong:
Hãy tự mình thử »Lưu ý: Không cần tải xuống hoặc cài đặt!
Nhận MÃ BỘ SẢN PHẨM CỦA RIÊNG BẠN
Đăng ký và nhận mã riêng miễn phí tại:
fontawesome.comTính năng mới trong Phông chữ Tuyệt vời 5
Điểm mới trong Font Awesome 5 là tiền tố fas
, Font Awesome 4 sử dụng fa
.
Chữ 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
:
Font Awesome được thiết kế để sử dụng với các phần tử nội tuyến. Phần tử <i>
và <span>
đượ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 kích thước phông chữ hoặc màu sắc của vùng chứa biểu tượng thì 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.
Ví dụ
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
Kết quả trong:
Hãy tự mình thử »Biểu tượng định cỡ
Các lớp fa-xs
, fa-sm
, fa-lg
, fa-2x
, fa-3x
, fa-4x
, fa-5x
, fa-6x
, fa-7x
, fa-8x
, fa-9x
hoặc fa-10x
được sử dụng để điều chỉnh kích thước biểu tượng tương ứng với vùng chứa của chúng.
Ví dụ
Đoạn mã sau:
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
Kết quả trong:
Hãy tự mình thử »Danh sách biểu tượng
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:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List
Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List
Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List
Item</li>
</ul>
Kết quả trong:
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à lớp fa-pulse
có bất kỳ biểu tượng nào để xoay với 8 bước.
Ví dụ
Đoạn mã sau:
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i
class="fas fa-spinner fa-pulse"></i>
Kết quả trong:
Hãy tự mình thử »Lưu ý: IE8 và IE9 không hỗ trợ hoạt ảnh CSS3.
Biểu tượng xoay và lật
Các lớp fa-rotate-*
và fa-flip-*
được sử dụng để xoay và lật các biểu tượng.
Ví dụ
Đoạn mã sau:
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
Kết quả trong:
Hãy tự mình thử »Biểu tượng xếp chồng lên nhau
Để 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 mẹ, lớp fa-stack-1x
cho biểu tượng có kích thước thông thường 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 các lớp biểu tượng lớn hơn vào lớp biểu tượng gốc để kiểm soát kích thước hơn nữa.
Ví dụ
Đoạn mã sau:
<span class="fa-stack fa-lg">
<i class="fas fa-circle
fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span class="fa-stack
fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i
class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle
(regular)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera
fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger"
style="color:red;"></i>
</span>
fa-ban on fa-camera
Kết quả trong:
Hãy tự mình thử »Biểu tượng có chiều rộng cố định
Cũng giống như các chữ cái và các ký tự khác, biểu tượng có thể có chiều rộng khác nhau và nếu bạn cần căn chỉnh các biểu tượng theo chiều dọc như trong danh sách hoặc menu thì đây có thể là một vấn đề.
Lớp fa-fw
được sử dụng để đặt các biểu tượng ở độ rộng cố định.
Ví dụ
<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon
1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon
2</div>
<div><i
class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>
<p>Without Fixed
Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i
class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon
3</div>
Kết quả trong:
Hãy tự mình thử »
Biểu tượng có viền và kéo
Các lớp fa-border
, fa-pull-right
hoặc fa-pull-left
được sử dụng để kéo trích dẫn hoặc biểu tượng bài viết.
Ví dụ
Đoạn mã sau:
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Kết quả trong:
Hãy tự mình thử »