Trên 1 website có 1 thành phần được sử dụng rất nhiều đó là các Icons. Nó thể hiện trực quan ý nghĩa của các button và các thành phần khác trên 1 website. Sau một thời gian sử dụng bộ icon của Font Awesome, thì bây giờ mình đã thay thế nó bằng Bootstrap Icons do nhu cầu sử dụng cơ bản. Và nó được tích hợp vào Laravel khá dễ dàng. Nên nhân dịp series về lập trình Laravel, vinasupport.com sẽ hướng dẫn các bạn cài đặt Bootstrap Icons trên Laravel nhé!
Bootstrap Icons là gì?
Đây là bộ icons miễn phí, chất lượng, thư viện icon mã nguồn mở với hơn 1800 icons. Bao gồm SVGs, SVG sprite hoặc web fonts. Bạn sử dụng nó tích hợp với thư viện bootstrap cho bất kỳ một website nà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ộ icons phù hợp cho nhu cầu cơ bản của bạn. Nếu các bạn cần nhiều loại icons hơn thì có thể tham khảo Font Awesome.
Nguồn vinasupport.com