Làm cách nào để tạo kiểu cho các biểu tượng Bootstrap trong CSS?
|
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 Show
Ư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 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 webCá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 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ẻ Trong đó tên lớp là tên của lớp biểu tượng cụ thể, e. g. Ví 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 — Đầ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 BootstrapBạ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 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ẻ Trong đó tên lớp là tên của lớp biểu tượng cụ thể, e. g. Ví 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 — Đầ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 Để 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 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
Làm cách nào để tạo kiểu cho các biểu tượng Bootstrap?May mắn thay, CSS cho phép chúng ta tạo kiểu cho chúng. . Specify the text-align property for the element.. Set the display to “inline-block” and specify the padding for the element.. Đặt riêng thuộc tính màu cho "icon-green" và "icon-red" Đặt kích thước phông chữ của "biểu tượng lớn" Làm cách nào để đặt biểu tượng Bootstrap trong CSS?Go to the official site of Bootstrap & copy the Bootstrap CDN for CSS, JS, Popper. js, and jQuery links. Add the CDN link along with add font icon link inside the tag. Add the class with bi bi-icon_name followed by the name of the icon.
Làm cách nào để thay đổi kích thước biểu tượng Bootstrap trong CSS?Để 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ừ . .
Làm cách nào để thay đổi màu của biểu tượng Bootstrap?Thêm một lớp màu vào phần tử biểu tượng để thay đổi màu của nó |
