Cách sử dụng icon 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 5

Bootstrap 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 color. Ngoài ra, để thay đổi kích thước của các icon, bạn có thể chỉ cần sử dụng thuộc tính CSS font-size.

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 web

Cá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:




    
    
    Including Bootstrap Icons in HTML
    
    
    
    


    

Hello, world!

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ẻ có áp dụng một lớp icon .bi-* riêng lẻ trên đó. Cú pháp chung để sử dụng các icon Bootstrap là:

Trong đó class-name là tên của lớp icon cụ thể, ví dụ: search, person, calendar, star, globe, facebook, twitter, 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:

Cách sử dụng icon bootstrap 5

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ẻ ), 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 Bootstrap

Bạ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:




    
    
    Including Font Awesome Icons in Bootstrap
    
    
    
    


    

Hello, world!

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ẻ cùng với một lớp cơ sở .fa và một lớp icon riêng lẻ .fa-*. 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ụ: search, user, calendar, star, globe, facebook, twitter, 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:

Cách sử dụng icon bootstrap 5

Tương tự, bạn có thể đặt các icon của Font Awesome bên trong nav, form, table, đoạn văn và các thành phần khác theo cách giống như cách bạn làm với các icon Bootstrap.

Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gian

Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.

Bootstrap • Bootstrap Cơ Bản