Trong lĩnh vực phát triển giao diện web hiện đại, việc sử dụng các biểu tượng (icons) không chỉ giúp tăng tính trực quan mà còn góp phần tạo nên trải nghiệm người dùng tốt hơn. Bootstrap Icon – thư viện icon chính thức được ra mắt năm 2020 – là một trong những công cụ đơn giản nhưng hiệu quả để làm điều đó.
Đọc bài viết này để hiểu rõ hơn về:
- Bootstrap icon là gì?
- Cách cài đặt và sử dụng thư viện Bootstrap Icon vào dự án của bạn
- Một số lưu ý khi sử dụng icon trong Bootstrap
- So sánh Bootstrap Icon và FontAwesome
Tổng quan về thư viện Bootstrap Icon
Bootstrap Icon là thư viện icon (biểu tượng) dạng vector (SVG) mã nguồn mở, được phát triển bởi nhóm tác giả của Bootstrap và ra mắt chính thức vào năm 2020 – đánh dấu lần đầu tiên Bootstrap có một thư viện biểu tượng riêng biệt. Bootstrap Icon được thiết kế để đồng bộ với Bootstrap 5.
Đọc thêm: Bootstrap 5 là gì? Những thay đổi nổi bật ở Bootstrap 5
Hiện nay, trải qua nhiều đợt cập nhật, Bootstrap Icon sở hữu khoảng 1.800 biểu tượng bao phủ nhiều lĩnh vực UI phổ biến như navigation, media, form, social, commerce. Trang chủ chính thức của Bootstrap Icon: https://icons.getbootstrap.com/
Trước đây ở Bootstrap 3, người dùng có thể sử dụng Glyphicons – một bộ icon miễn phí đi kèm sẵn trong framework. Bạn chỉ cần thêm class như glyphicon glyphicon-search là có ngay icon.
Tuy nhiên, đến Bootstrap 4, đội ngũ phát triển đã loại bỏ hoàn toàn Glyphicons ra khỏi core. Lý do là để làm framework nhẹ hơn và giúp cho người dùng linh hoạt trong việc chọn thư viện icon riêng (FontAwesome, Feather, Ionicons,…), nhưng cũng khiến việc đồng bộ giữa giao diện Bootstrap và các thư viện icon bên ngoài đôi khi không còn liền mạch.
Vì vậy trong quá trình phát triển Bootstrap 5, đội ngũ phát triển đã quyết định tự xây dựng một thư viện icon dành riêng cho Bootstrap, giúp tăng khả năng tương thích với giao diện và thiết kế của Bootstrap.
Hình ảnh một số icon trong Boostap Icons.
Tại sao nên sử dụng Bootstrap Icon?
- Tối ưu cho Bootstrap: Bootstrap Icon được thiết kế để tương thích tuyệt đối với các component của Bootstrap.
- Biểu tượng dạng SVG: Dễ tùy chỉnh kích thước, màu sắc, độ dày nét chỉ với CSS
- Nhẹ, không phụ thuộc JS: Thư viện được cài đặt đơn giản và nhanh chóng để sử dụng
- Mã nguồn mở (MIT License): Bootstrap Icon là thư viện miễn phí và cho phép tùy chỉnh một cách dễ dàng
- Dễ tìm kiếm và sử dụng icon: Giao diện website ở Bootstrap Icon cực thân thiện và dễ dàng để có thể tìm kiếm icon phù hợp với mục đích sử dụng.
Cách cài đặt Bootstrap Icon
Bootstrap Icon được phát hành trên trình quản lý gói npm, nhưng bạn có thể cài đặt nó thông qua nhiều cách khác nhau bao gồm:
Thông qua Trình quản lý gói
Cài đặt Bootstrap Icon bao gồm các tệp SVG, sprite biểu tượng và phông chữ biểu tượng bằng npm hoặc Composer.
Với npm:
npm i bootstrap-icons
Với composer:
composer require twbs/bootstrap-icons
Ưu điểm:
- Quản lý dễ dàng và tích hợp tốt trong dự án sử dụng bundler như Webpack, Vite, Laravel Mix, đồng bộ với các thư viện khác
- Dễ cập nhật phiên bản mới bằng lệnh
- Hạn chế phụ thuộc vào mạng (chạy offline vẫn được)
Điều này phù hợp khi dự án trung bình hoặc lớn, cần quản lý package và build tự động.
Thông qua CDN
Một cách đơn giản và nhanh chóng để sử dụng Bootstrap Icon trong dự án đó là sử dụng CDN. Bạn có thể nhúng đường dẫn CDN CSS của Bootstrap Icon vào phần <head> của trang web như sau:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
Hoặc sử dụng @import trong file CSS thông qua jsDelivr:
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
Ưu điểm:
- Phương pháp cài đặt cực nhanh, không cần build hay cài đặt package manager
- CDN giúp tải nhanh hơn vì có máy chủ ở nhiều nơi và cache trên toàn cầu
Phương pháp này phù hợp với các dự án nhỏ, dự án cần phát triển nhanh, hoặc cần thử nghiệm chức năng mà không muốn cài thêm package.
Thông qua tải về tập tin
Bạn có thể tải trọn bộ Bootstrap Icon từ GitHub (tại đây), bao gồm SVG, font, license, README và cả file package.json (các script npm đi kèm chủ yếu dùng cho mục đích phát triển). Sau đó đưa những file này vào dự án web để sử dụng.
Ưu điểm:
- Toàn quyền kiểm soát: không phụ thuộc vào mạng hoặc CDN
- Dễ dàng tuỳ chỉnh icon nếu cần (có thể chỉnh sửa SVG hoặc CSS)
- Dùng được khi không dùng npm/composer hoặc khi cần deploy nội bộ (intranet)
Phù hợp cho dự án nội bộ, cần bảo mật hoặc không muốn phụ thuộc mạng ngoài và khi muốn tuỳ biến icon theo ý mình.
Ví dụ cách sử dụng Bootstrap Icon trong dự án
Sau khi đã thêm Bootstrap Icon vào dự án (qua CDN, npm hoặc tải trực tiếp), bạn có thể sử dụng icon bằng cách gọi theo class tên của icon.
Ví dụ 1: Chèn icon vào nút bấm
<button class="btn btn-primary"> <i class="bi bi-download"></i> Tải xuống </button>
Trong đó:
- <button class=“btn btn-primary”> Tạo nút theo theme màu xanh trong Bootstrap.
- <i class=“bi bi-download”></i> Dùng thẻ <i> để chèn icon Bootstrap.
- bi class chung của Bootstrap Icon, bi-download icon hình mũi tên tải xuống.
Kết quả:
Ví dụ 2: Icon trong input group
<div class="input-group mb-3"> <span class="input-group-text"><i class="bi bi-person"></i></span> <input type="text" class="form-control" placeholder="Tên đăng nhập"> </div>
Trong đó:
- <div class=“input-group mb-3”> Tạo một nhóm input Bootstrap.
- <span class=“input-group-text”> Thêm phần tử hiển thị trước ô nhập. Bên trong có icon: <i class=“bi bi-person”></i> Icon hình người từ Bootstrap Icon (bi-person).
- <input type=“text” class=“form-control” placeholder=“Tên đăng nhập”> Ô nhập liệu với placeholder “Tên đăng nhập”.
Kết quả:
Ví dụ 3: Sử dụng Icon độc lập có chứa tooltip
<i class="bi bi-info-circle" data-bs-toggle="tooltip" title="Thông tin chi tiết"></i>
Trong đó:
- <i class=“bi bi-info-circle”> Thẻ icon, dùng Bootstrap Icon.
- bi class chung của Bootstrap Icon. bi-info-circle icon hình vòng tròn có chữ “i” (biểu tượng thông tin).
- data-bs-toggle=”tooltip” Kích hoạt tooltip của Bootstrap.
- title=”Thông tin chi tiết” Nội dung hiển thị khi người dùng di chuột vào icon.
Kết quả:
Ví dụ cách sử dụng SVG trực tiếp từ Bootstrap Icon
Bootstrap Icon cung cấp tập tin SVG riêng cho từng icon, giúp bạn dễ dàng nhúng trực tiếp vào HTML hoặc sử dụng như ảnh tĩnh.
Nhúng trực tiếp vào HTML
Bạn có thể copy mã SVG từ https://icons.getbootstrap.com và dán thẳng vào nơi bạn muốn hiển thị icon
Ví dụ:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle-fill" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/> </svg>
Trong đó:
- width, height: kiểm soát kích thước
- fill=”currentColor”: cho phép đổi màu qua CSS hoặc class Bootstrap như text-danger, text-primary…
- viewBox: bắt buộc để icon có thể responsive
Dùng như hình ảnh bên ngoài (external image)
Tải icon SVG về máy và dùng như ảnh bình thường. Cách này tuy đơn giản nhưng sẽ không đổi màu được bằng CSS không thiết lập fill=”currentColor”.
<img src="/icons/heart-fill.svg" width="32" height="32" alt="Heart Icon">
Ví dụ cách tùy chỉnh icon trong Bootstrap
Vì Bootstrap Icon sử dụng định dạng SVG, nên bạn có thể tùy chỉnh định dạng theo nhiều cách khác nhau tùy vào cấu trúc của dự án. Bạn có thể sử dụng CSS để có thể tùy chỉnh thuộc tính và hiệu ứng của icon:
Tùy chỉnh kích thước và màu sắc bằng thuộc tính style
<i class="bi bi-alarm" style="font-size: 2rem; color: #0d6efd;"></i>
Tùy chỉnh bằng class có sẵn của Bootstrap
<i class="bi bi-exclamation-circle text-danger fs-3"></i>
Một số lưu ý khi sử dụng Bootstrap Icon
Mặc dù Bootstrap Icon dễ sử dụng, nhưng bạn cũng cần lưu ý một số vấn đề để có thể dùng thư viện hiệu quả hơn:
- Sử dụng fill=”currentColor” khi muốn thay đổi màu: Khi bạn chèn SVG trực tiếp, hãy đảm bảo icon có thuộc tính fill=”currentColor” để có thể thay đổi màu bằng CSS hoặc các class như text-primary, text-danger.
- Đảm bảo hiệu suất của trang web: Nếu chỉ sử dụng một vài biểu tượng, bạn hãy cân nhắc việc nhúng SVG thay vì tải toàn bộ thư viện font để giảm dung lượng tải trang.
- Không dùng aria-hidden=“true” cho icon mang nội dung: Nếu icon chỉ mang tính trang trí, bạn nên thêm aria-hidden=”true” để tránh gây nhiễu cho trình đọc màn hình. Ngược lại, nếu icon là nội dung chính (ví dụ trong nút hoặc liên kết), bạn cần cung cấp mô tả thay thế. Ví dụ: <i class=“bi-trash” aria-label=“Xóa”></i>
- Tránh lạm dụng quá nhiều icon: Icon giúp tăng tính trực quan, nhưng nếu dùng quá nhiều sẽ gây rối mắt hoặc ảnh hưởng hiệu suất tải trang, nhất là nếu bạn nhúng nhiều icon SVG lớn.
So sánh Bootstrap Icon và FontAwesome
Cả Bootstrap Icon và FontAwesome đều là hai thư viện icon phổ biến và mạnh mẽ, nhưng chúng có sự khác biệt rõ rệt về cách dùng, phong cách thiết kế và khả năng mở rộng. Dưới đây là bảng so sánh chi tiết giữa hai thư viện này:
| Tiêu chí | Bootstrap Icon | FontAwesome |
| Nhà phát hành | Nhóm phát triển của Bootstrap | Phát triển bởi FontAwesome Inc. |
| Số lượng icon | Khoảng 2000 icon (miễn phí hoàn toàn) | Có hơn 30.000 icon (bao gồm cả miễn phí và trả phí trong phiên bản Pro). Phiên bản miễn phí cung cấp khoảng 2.000 icon |
| Kiểu dáng thiết kế | Đơn giản, tối giản, thiên về outline | Đa dạng về kiểu dáng: solid, regular, duotone, brands |
| Khả năng tương thích với Bootstrap | Tuyệt đối tương thích | Tương thích tốt, nhưng không đồng bộ hoàn toàn |
| Định dạng | Ưu tiên định dạng SVG, ngoài ra còn có icon sprite và font | Hỗ trợ cả phông chữ web (Web Fonts) và SVG |
| Kích thước tập tin và hiệu suất | Nhẹ hơn, tập tin font khoảng 100-200 KB. | Phiên bản miễn phí nặng hơn một chút (khoảng 300-400 KB cho font). Phiên bản Pro hoặc tải toàn bộ có thể lên đến vài MB nếu không tối ưu. |
Câu hỏi thường gặp về Bootstrap icon
Có thể sử dụng Bootstrap Icon mà không cần Bootstrap framework không?
Bootstrap Icon là một thư viện độc lập, được thiết kế để hoạt động riêng biệt, không phụ thuộc vào các thành phần khác của Bootstrap. Vì vậy bạn có thể sử dụng Bootstrap icons mà không cần Bootstrap (CSS/JS).
Phiên bản mới nhất của Bootstrap Icon là gì?
Phiên bản mới nhất của Bootstrap Icon tại thời điểm viết bài là v1.11.3, phát hành ngày 03/01/2025. Bạn có thể theo dõi thêm về các phiên bản phát hành tại đây.
Làm thế nào để thay đổi định dạng của một icon?
Để thay đổi định dạng của một Bootstrap icon, bạn có thể tùy chỉnh kích thước, màu sắc, hướng, hoặc thậm chí chuyển đổi giữa các cách sử dụng (font hoặc SVG). Dưới đây là các cách thực hiện chi tiết:
Thay đổi kích thước
Sử dụng thuộc tính font-size:
<i class="bi-house" style="font-size: 32px;"></i>
Hoặc dùng CSS:
.bi-house { font-size: 32px; }
Thay đổi màu sắc
Sử dụng thuộc tính color:
<i class="bi-house" style="color: red;"></i>
Hoặc dùng CSS:
.bi-house { color: red; }
Xoay hoặc lật
Dùng thuộc tính transform trong style:
<i class="bi-house" style="transform: rotate(45deg);"></i>
Hoặc dùng CSS:
.bi-house { transform: scaleX(-1); transform: scaleY(-1); }
Tổng kết
Bootstrap Icon là thư viện icon mã nguồn mở do chính đội ngũ Bootstrap phát triển. Với ưu điểm nhẹ, dễ dùng, và tương thích tốt với Bootstrap, Bootstrap Icon đang dần trở thành lựa chọn phổ biến cho nhiều nhà phát triển. ITviec hi vọng bài viết này đã mang đến cho bạn đọc những thông tin cần thiết về cách cài đặt và sử dụng thư viện icon mạnh mẽ này.