Trên một trang web, biểu tượng (icon) là một thành phần quan trọng, thường được sử dụng để hình dung ý nghĩa của các nút bấm và phần tử khác trên trang web. Sau một thời gian sử dụng bộ biểu tượng từ thư viện Font Awesome, tôi đã quyết định thay thế chúng bằng Bootstrap Icons do nhu cầu của mình đơn giản. Việc tích hợp Bootstrap Icons vào dự án Laravel của tôi cũng khá đơn giản. Vì vậy, trong bài viết này của vinasupport.com, tôi sẽ hướng dẫn cách cài đặt và sử dụng Bootstrap Icons trong dự án Laravel của bạn.
Bootstrap Icons là gì?
Đây là một bộ biểu tượng miễn phí, chất lượng cao, và là một thư viện biểu tượng mã nguồn mở với hơn 1800 biểu tượng. Bạn có thể sử dụng nó để tích hợp vào bất kỳ trang web nào, bằng cách sử dụng các tệp SVGs, SVG sprite hoặc font web. Nó hoàn toàn tương thích với thư viện Bootstrap, giúp làm cho trang web của bạn trở nên đẹp và độc đáo.
Cài đặt Bootstrap Icons
Cài đặt thông qua npm
npm i bootstrap-icons
Cài đặt thông qua composer
composer require twbs/bootstrap-icons
Hoặc các bạn download trực tiếp tại đây
Hướng dẫn sử dụng Bootstrap Icons cho Laravels
Đâu tiên chúng ta cần import file stylesheet vào file app.scss trong thư mục resources của Laravels.
@import 'bootstrap-icons/font/bootstrap-icons.css';
Trong file template .blade.php thì chúng ta đưa icon vào như sau:
<i class="bi-alarm"></i>
Bạn có thể custom lại style của icon giống như là:
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
Bạn hãy tham khảo danh sách icon của Bootstrap theo link bên dưới.
Bootstrap Icons là bộ sưu tập các biểu tượng thích hợp cho các nhu cầu cơ bản của bạn. Nếu bạn cần nhiều loại biểu tượng khác, thì có thể xem xét sử dụng Font Awesome.
