Phông chữ Giới thiệu tuyệt vời
Biểu tượng cơ bản
Để sử dụng các biểu tượng Font Awesome, hãy thêm dòng sau vào bên trong phần <head> của trang HTML của bạn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Lưu ý: Không cần tải xuống hoặc cài đặt!
Bạn đặt các biểu tượng Font Awesome bằng cách sử dụng tiền tố fa và tên của biểu tượng.
Ví dụ
Đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Kết quả trong:
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.
Biểu tượng lớn hơn
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:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Kết quả trong:
Mẹo: Nếu biểu tượng của bạn bị cắt bớt ở trên và dưới, hãy tăng chiều cao dòng.
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><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Kết quả trong:
- List icons
- List icons
- List icons
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="fa 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:
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="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i
class="fa fa-spinner fa-pulse"></i>
Kết quả trong:
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="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>Kết quả trong:
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="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-cameraKết quả trong:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Biểu tượng có chiều rộng cố định
Lớp fa-fw được sử dụng để đặt các biểu tượng ở độ rộng cố định. Lớp này rất hữu ích khi các biểu tượng có độ rộng khác nhau làm mất đi sự liên kết. Đặc biệt hữu ích trong các nhóm danh sách và danh sách điều hướng của Bootstrap.
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div> Hãy tự mình thử »Khởi động
Font Awesome cũng hoạt động tốt với tất cả các thành phần Bootstrap.
