Hướng dẫn icon bootstrap 5 - biểu tượng bootstrap 5
Trong hướng dẫn này, bạn sẽ học cách thêm và sử dụng các icon của Bootstrap trên một trang web. Sử dụng icon trong Bootstrap 5Bootstrap hiện bao gồm hơn 1.600 icon chất lượng cao, có sẵn ở định dạng SVG, SVG sprite hoặc web font. Bạn có thể sử dụng chúng có hoặc không có Bootstrap trong bất kỳ dự án nào. Lợi thế của việc sử dụng các icon font là, bạn có thể tạo các icon với bất kỳ màu nào chỉ bằng cách áp dụng thuộc tính CSS Bây giờ, chúng ta hãy xem cách thêm và sử dụng các biểu tượng Bootstrap trên một trang web. Thêm các icon Bootstrap vào một trang webCách đơn giản nhất để đưa các icon Bootstrap vào một trang web là sử dụng liên kết CDN. Liên kết CDN này về cơ bản trỏ đến một tệp CSS từ xa bao gồm tất cả các lớp cần thiết để tạo icon font. Bạn có thể thêm các icon Bootstrap trong mẫu Bootstrap cũng như trong một trang web đơn giản mà không cần sử dụng Bootstrap framework. Hãy xem ví dụ sau:
Cách sử dụng các icon Bootstrap trong code của bạnĐể sử dụng các icon Bootstrap trong code của bạn, bạn sẽ yêu cầu một thẻ
Trong đó class-name là tên của lớp icon cụ thể, ví dụ: 0, 1, 2, 3, 4, 5, 6, v.v. Xem danh sách tất cả các lớp icon Bootstrap.class-name là tên của lớp icon cụ thể, ví dụ: 0, 1, 2, 3, 4, 5, 6, v.v. Xem danh sách tất cả các lớp icon Bootstrap.Ví dụ: để đặt biểu tượng tìm kiếm bên trong một button, bạn có thể làm như sau:
Kết quả của ví dụ trên sẽ giống như sau: Tương tự, bạn có thể đặt các icon bên trong thanh điều hướng, form, table, đoạn văn hoặc bất cứ nơi nào bạn muốn. Trong chương tiếp theo, bạn sẽ thấy cách sử dụng các iconnày trong thành phần điều hướng của Bootstrap. Lưu ý: Hãy nhớ để lại một khoảng trống sau thẻ đóng của phần tử icon (tức là sau thẻ7), khi sử dụng các icon cùng với các chuỗi văn bản, chẳng hạn như các button 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 icon và văn bản . Hãy nhớ để lại một khoảng trống sau thẻ đóng của phần tử icon (tức là sau thẻ7), khi sử dụng các icon cùng với các chuỗi văn bản, chẳng hạn như các button 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 icon và văn bản . Sử dụng các icon Font Awesome trong BootstrapBạn cũng có thể sử dụng các thư viện icon bên ngoài trong Bootstrap. Một trong những thư viện icon bên ngoài phổ biến nhất và tương thích cao với Bootstrap là Font Awesome. Nó cung cấp hơn 2.000 icon có sẵn ở SVG, PNG, cũng như ở định dạng web font để có khả năng sử dụng và khả năng mở rộng tốt hơn. Bạn chỉ cần sử dụng liên kết CDN Font Awesome có sẵn miễn phí để đưa nó vào dự án của mình. Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:
Cách sử dụng Icon của Font Awesome trong code của bạnĐể sử dụng các icon của Font Awesome trong code của mình, bạn sẽ yêu cầu một thẻ 9 và một lớp icon riêng lẻ 0. Cú pháp chung để sử dụng các icon của Font Awesome là:
Trong đó class-name là tên của lớp icon cụ thể, ví dụ: 0, 2, 2, 3, 4, 5, 6, v.v. Xem danh sách tất cả các lớp icon của Font Awesome.class-name là tên của lớp icon cụ thể, ví dụ: 0, 2, 2, 3, 4, 5, 6, v.v. Xem danh sách tất cả các lớp icon của Font Awesome.Ví dụ: bạn có thể đặt icon tìm kiếm của Font Awesome bên trong một button như sau:
Kết quả của ví dụ trên sẽ giống như sau: Tương tự, bạn có thể đặt các icon bên trong thanh điều hướng, form, table, đoạn văn hoặc bất cứ nơi nào bạn muốn. Trong chương tiếp theo, bạn sẽ thấy cách sử dụng các iconnày trong thành phần điều hướng của Bootstrap. Lưu ý: Hãy nhớ để lại một khoảng trống sau thẻ đóng của phần tử icon (tức là sau thẻ
|