Bootstrap hiện bao gồm hơn 1.300 biểu tượng chất lượng cao, có sẵn ở định dạng SVG, SVG sprite hoặc phông chữ web. Bạn có thể sử dụng chúng có hoặc không có Bootstrap trong bất kỳ dự án nào
Ưu điểm của việc sử dụng các biểu tượng phông chữ là bạn có thể tạo các biểu tượng có màu bất kỳ chỉ bằng cách áp dụng thuộc tính CSS color
. Ngoài ra, để thay đổi kích thước của các biểu tượng, bạn chỉ cần sử dụng thuộc tính CSS font-size
Bây giờ, hãy xem cách bao gồm và sử dụng các biểu tượng Bootstrap trên trang web
Bao gồm các biểu tượng Bootstrap trong một trang web
Cách đơn giản nhất để đưa các biểu tượng Bootstrap vào trang web là sử dụng liên kết CDN. Liên kết CDN này về cơ bản trỏ đến tệp CSS từ xa bao gồm tất cả các lớp cần thiết để tạo biểu tượng phông chữ
Bạn có thể bao gồm các biểu tượng Bootstrap trong mẫu Bootstrap cũng như trong một trang web đơn giản mà không cần sử dụng khung Bootstrap. Hãy cùng xem ví dụ sau
Including Bootstrap Icons in HTML
Hello, world!
Cách sử dụng các biểu tượng Bootstrap trong mã của bạn
Để sử dụng các biểu tượng Bootstrap trong mã của bạn, bạn sẽ cần một thẻ với một lớp biểu tượng riêng lẻ
.bi-*
được áp dụng trên đó. Cú pháp chung để sử dụng các biểu tượng Bootstrap là
Trong đó tên lớp là tên của lớp biểu tượng cụ thể, e. g. search
, person
,
Search
Search
0, Search
Search
1, Search
Search
2, Search
Search
3, Search
Search
4, v.v. Xem danh sách tất cả các lớp biểu tượng BootstrapVí dụ: để đặt biểu tượng tìm kiếm bên trong một nút, bạn có thể làm như thế này
Search
Search
— Đầu ra của ví dụ trên sẽ giống như thế này
Tương tự, bạn có thể đặt các biểu tượng bên trong điều hướng, biểu mẫu, bảng, đoạn văn hoặc bất kỳ đâu bạn muốn. Trong chương tiếp theo, bạn sẽ thấy cách sử dụng các biểu tượng này trong các thành phần điều hướng Bootstrap
Ghi chú. Nhớ chừa một khoảng trống sau thẻ đóng của thành phần icon [i. e. sau thẻ], khi sử dụng các biểu tượng cùng với chuỗi văn bản, chẳng hạn như các nút bên trong hoặc liên kết điều hướng, để đảm bảo rằng có khoảng cách thích hợp giữa biểu tượng và văn bản
Sử dụng các biểu tượng phông chữ tuyệt vời trong Bootstrap
Bạn cũng có thể sử dụng các thư viện biểu tượng bên ngoài trong Bootstrap. Một trong những thư viện biểu tượng bên ngoài phổ biến và có tính tương thích cao dành cho Bootstrap là Font Awesome. Nó cung cấp hơn 675 biểu tượng có sẵn ở định dạng SVG, PNG, cũng như ở định dạng phông chữ web để có khả năng sử dụng và khả năng mở rộng tốt hơn
Bạn có thể chỉ cần sử dụng liên kết CDN phông chữ tuyệt vời có sẵn miễn phí để đưa nó vào dự án của mình. Hãy cùng xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào
Including Font Awesome Icons in Bootstrap
Hello, world!
Cách sử dụng các biểu tượng phông chữ tuyệt vời trong mã của bạn
Để sử dụng các biểu tượng Phông chữ tuyệt vời trong mã của bạn, bạn sẽ cần một thẻ cùng với một lớp cơ sở
Search
Search
6 và một lớp biểu tượng riêng lẻ Search
Search
7. Cú pháp chung để sử dụng các biểu tượng phông chữ tuyệt vời làTrong đó tên lớp là tên của lớp biểu tượng cụ thể, e. g. search
,
Search
Search
9, Search
Search
0, Search
Search
1, Search
Search
2, Search
Search
3, Search
Search
4, v.v. Xem danh sách tất cả các lớp biểu tượng Font AwesomeVí dụ: bạn có thể đặt biểu tượng tìm kiếm phông chữ tuyệt vời bên trong một nút như thế này
Search
Search
— Đầu ra của ví dụ trên sẽ giống như thế này
Tương tự, bạn có thể đặt các biểu tượng Font Awesome bên trong điều hướng, biểu mẫu, bảng, đoạn văn và các thành phần khác giống như cách bạn thực hiện với các biểu tượng Bootstrap
Bạn có thể đặt các biểu tượng ở bất kỳ đâu bằng cách sử dụng Tiền tố CSS fa
và tên của biểu tượng. Các biểu tượng được thiết kế để sử dụng với các thành phần nội tuyến [chúng tôi thích thẻ vì sự ngắn gọn, nhưng sử dụng
đúng ngữ nghĩa hơn]
Để tăng kích thước biểu tượng so với vùng chứa của chúng, hãy sử dụng fa-xs
, fa-sm
, fa-lg
[tăng 33%] hoặc sử dụng kích thước chữ [để chia tỷ lệ từ 1x thành 10x]
Bạn có thể làm cho tất cả các biểu tượng của mình có cùng chiều rộng để chúng có thể dễ dàng căn chỉnh theo chiều dọc, chẳng hạn như trong danh sách hoặc menu điều hướng
Thêm một lớp
8 trên phần tử HTML tham chiếu biểu tượng của bạn để đặt một hoặc nhiều biểu tượng có cùng chiều rộng cố định. Điều này thật tuyệt khi sử dụng khi thay đổi độ rộng của biểu tượng [e. g. một biểu tượng cao nhưng gầy phía trên một biểu tượng rộng nhưng ngắn] sẽ làm mất căn chỉnh theo chiều dọc. Để rõ ràng trong ví dụ sau, chúng tôi đã thêm màu nền trên biểu tượng để bạn có thể thấy chiều rộng cố định và cũng tăng kích thước phông chữ của phần tử gốc