Biểu tượng Bootstrap 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 cần có 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 Làm cách nào để thêm 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 để tạo kiểu cho các biểu tượng Bootstrap trong CSS?Có thể thêm các biểu tượng Bootstrap vào HTML và CSS bằng cách sử dụng liên kết CDN của các biểu tượng mặc định . Hỗ trợ các biểu tượng mặc định được cung cấp bởi chính Bootstrap và bạn phải thêm liên kết CDN của các biểu tượng bootstrap vào tài liệu HTML của mình.
Làm cách nào để thay đổi biểu tượng trong Bootstrap?Nhấp đúp chuột vào nó để mở trình duyệt Biểu tượng. Trong hộp thoại này, bạn có thể duyệt qua tất cả các bộ biểu tượng có sẵn từ danh sách thả xuống ở trên cùng bên trái và tìm kiếm các biểu tượng theo tên. Chọn một trong các biểu tượng trong hộp thoại và nhấp vào nút Lưu (hoặc chỉ cần nhấp đúp vào biểu tượng). Thành phần Biểu tượng sẽ phản ánh sự thay đổi |
