Trước khi chưa có Font Awesome 5 (FA5) thì mọi người dùng Font Awesome 4 (FA4) . Font Awesome Icons Nhưng hiện tại thì FA5 có phiên bản C...
Trước khi chưa có Font Awesome 5 (FA5) thì mọi người dùng Font Awesome 4 (FA4).
 |
| Font Awesome Icons |
Nhưng hiện tại thì FA5 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.
Vậy mình sẽ nói luôn về FA5. Để sử dụng biểu tượng FA5 miễn phí, bạn có thể chọn tải xuống thư viện Font Awesome hoặc bạn 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 bạn thêm FA vào web của mình trang.
Hướng dẫn này mình sẽ tập trung chủ yếu vào phiên bản MIỄN PHÍ.
Font AwesomeTheo Nhà phát hành khuyến khích các bạn nên đăng ký để sử dụng. Nhưng có nhiều bạn có nhu cầu nên mình xin chia sẻ Free mã này 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.
⛨ Thử với Class đầu
<i class="fas fa-clock"></i>copy và thay vào dòng "Thay code vào đây" ở bảng thử dưới để xem kết quả. ⛨_Tất cả các Code đều chạy thử tại đây_⛨ ⛨ Thay đổi phông chữ, kích thước và màu sắc
Các phần tử<i> và <span> được sử dụng rộng rãi cho các biểu tượng.Bạn có thể thay đổi
kích thước, phông chữ hoặc màu sắc theo ý của bạn.<i class="fas fa-clock" style="font-size:111px;color:#1ABC9C"></i>
<i class="far fa-clock" style="font-size:111px;color:#1ABC9C"></i>⛨ Các biểu tượng kích thước
Kích thước tùy thuộc vào yêu cầu thiết kế của bạn:
fa-xs, fa-sm, -lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, hoặc fa-10x, ...<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>⛨ Liệt kê các 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ự.<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>⛨ Biểu tượng động (xoay tròn)
Các class
fa-spin và fa-pulse được áp dụng.<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>⛨ Các biểu tượng được xoay và lật
Các class
fa-rotate-* và fa-flip-* được sử dụng để xoay và lật các biểu tượng.<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>⛨ Biểu tượng xếp chồng lên nhau
Để xếp chồng nhiều biểu tượng, chúng ta sử dụng các class theo thứ tự
fa-stack , fa-stack-1x, fa-stack-2x. Tuy nhiên có 1 số biểu tượng chúng ta phải thay đổi các lớp cho nhau.
Class
fa-inverse được sử dụng như một màu nền biểu tượng.<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⛨ Căn chỉnh các biểu tượng cố định và không cố định theo chiều dọc
Class
fa-fw được sử dụng để thiết lập căn chỉnh.<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> QRViet</div>
<div><i class="fas fa-band-aid fa-fw"></i> QRViet</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> QRViet</div>
<p>Without Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> QRViet</div>
<div><i class="fas fa-band-aid"></i> QRViet</div>
<div><i class="fab fa-bluetooth-b"></i> QRViet 3</div>⛨ Các biểu tượng có viền
Class
fa-border, fa-pull-right hoặc fa-pull-left được sử dụng cho dấu ngoặc kép hoặc biểu tượng bài viết.<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
QRViet - Đoạn văn bản sẽ được hiển thị tại đây.CHIA SẺ CHO BẠN BÈ
