Hướng dẫn bootstrap 4 icon list - danh sách biểu tượng bootstrap 4
|
Tham khảo tiếp bài học dưới đây của hiepsiit.com để tìm hiểu chi tiết về biểu tượng trong Bootstrap Show
Biểu Tượng Trong BootstrapKhác với Bootstrap 3 bao gồm Glyphicon (các font icon) trong định dạng font chữ, phiên bản Bootstrap 4 không có thư viện biểu tượng theo mặc định. Tuy nhiên nếu muốn chúng ta vẫn có thể thêm các biểu tượng trong dự án của mình bằng cách sử dụng thư viện biểu tượng dựa trên font chữ bên ngoài. Thư viện phổ biến nhất và tương thích với Bootstrap phải kể đến Font Awesome, bao gồm 675 biểu tượng khác nhau có sẵn ở định dạng font chữ. Lợi thế của việc sử dụng các font icon là chúng ta có thể tạo các biểu tượng với các màu sắc bất kỳ bằng cách sử dụng thuộc tính color trong CSS.color trong CSS. Thêm Font Awesome Trong BootstrapChúng ta chỉ cần sử dụng link CDN font-awesome có sẵn để thêm các biểu tượng font-awesome vào dự án của mình. Về cơ bản link CDN trỏ đến file CSS từ xa có chứa các lớp cần thiết để tạo các biểu tượng khác nhau. Ví dụ: ví dụ dưới đây minh họa cách thêm font awesome vào dự án: ví dụ dưới đây minh họa cách thêm font awesome vào dự án: Xem ví dụ Sử Dụng Các Biểu Tượng Font Awesome Trong MãĐể sử dụng các biểu tượng font-awesome trong mã, chúng ta sẽ cần một thẻ i cùng lớp .fa và lớp biểu tượng .fa-*. Cú pháp chung để sử dụng các biểu tượng font-awesome có dạng như dưới đây: i cùng lớp .fa và lớp biểu tượng .fa-*. Cú pháp chung để sử dụng các biểu tượng font-awesome có dạng như dưới đây: Trong cú pháp trên, fa-class-name là tên của lóp biểu tượng cụ thể (chẳng hạn như fa-search, fa-user, fa-star, fa-calendar, fa-globe, ...) được xác định trong file font-awesome.min.css.fa-class-name là tên của lóp biểu tượng cụ thể (chẳng hạn như fa-search, fa-user, fa-star, fa-calendar, fa-globe, ...) được xác định trong file font-awesome.min.css. Ví dụ: Để thêm và sử dụng biểu tượng tìm kiếm (search), chúng ta có thể đặt đoạn mã dưới đây vào vị trí bất kỳ: Để thêm và sử dụng biểu tượng tìm kiếm (search), chúng ta có thể đặt đoạn mã dưới đây vào vị trí bất kỳ: Xem ví dụ Sử Dụng Các Biểu Tượng Font Awesome Trong Mã Để sử dụng các biểu tượng font-awesome trong mã, chúng ta sẽ cần một thẻ i cùng lớp .fa và lớp biểu tượng .fa-*. Cú pháp chung để sử dụng các biểu tượng font-awesome có dạng như dưới đây: Chúng ta sử dụng khoảng trắng sau thẻ đóng phần tử icon (tức là sau thẻ i) 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 link điều hướng, để đảm bảo khoảng cách phù hợp giữa biểu tượng và bản văn.
Sử dụng icon trong Bootstrap 5Thêm các icon Bootstrap vào một trang web Cách sử dụng các icon Bootstrap trong code của bạn 5 min read Thêm các icon Bootstrap vào một trang webCách sử dụng các icon Bootstrap trong code của bạn 5 min read Cách sử dụng các icon Bootstrap trong code của bạn5 min read Trong đó class-name là tên của lớp icon cụ thể, ví dụ: 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ẻ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 .Comdy hữu ích và giúp bạn tiết kiệm thời gian 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ẻ Trong đó class-name là tên của lớp icon cụ thể, ví dụ: 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ẻ |
