(Vn-Z.vn) Sau 5 phiên bản alpha, mới đây Bootstrap Icons đã chính thức phát hành phiên bản chính thức ổn định Bootstrap Icons v1.0.0. Bô thư viện icon có hơn 1100 icon , nhóm dự kiến sẽ thêm hàng trăm biểu tượng vào trong phiên bản nhỏ sắp tới.
Từ sau phiên thử alpha thứ 5 , Bộ thư viện mới đã được nhóm vẽ lại hơn một phần ba số biểu tượng, chủ yếu là tinh chỉnh đường dẫn và hình dạng. Việc vẽ lại cải tiến để chuẩn bị cho các phông chữ biểu tượng, nhưng thật không may, vì các công cụ tạo phông chữ từ SVG không đủ hoàn thiện nên các phông chữ biểu tượng đã bị hoãn lại phiên bản v1.1.0.
Cách cài đặt
Cài đặt qua npm:
Hoặc tải xuống phiên bản mới từ GitHub, hoặc chỉ tải xuống tệp SVG (không bao gồm các tệp khác trong kho lưu trữ).
Cách sử dụng
Bạn có thể thêm Biểu tượng Bootstrap vào dự án của mình theo một số cách:
- Sao chép và dán SVG dưới dạng code nhúng HTML
- Theo tham chiếu phần tử
- Sử dụng SVG sprite
- thông qua CSS
Vn-Z.vn team tổng hợp tham khảo https://blog.getbootstrap.com/2020/08/28/bootstrap-icons-stable/
Từ sau phiên thử alpha thứ 5 , Bộ thư viện mới đã được nhóm vẽ lại hơn một phần ba số biểu tượng, chủ yếu là tinh chỉnh đường dẫn và hình dạng. Việc vẽ lại cải tiến để chuẩn bị cho các phông chữ biểu tượng, nhưng thật không may, vì các công cụ tạo phông chữ từ SVG không đủ hoàn thiện nên các phông chữ biểu tượng đã bị hoãn lại phiên bản v1.1.0.
Cách cài đặt
Cài đặt qua npm:
Mã:
npm i bootstrap-iconsHoặc tải xuống phiên bản mới từ GitHub, hoặc chỉ tải xuống tệp SVG (không bao gồm các tệp khác trong kho lưu trữ).
Cách sử dụng
Bạn có thể thêm Biểu tượng Bootstrap vào dự án của mình theo một số cách:
- Sao chép và dán SVG dưới dạng code nhúng HTML
Mã:
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">>path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/>- Theo tham chiếu phần tử
Mã:
<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">- Sử dụng SVG sprite
Mã:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/></svg><svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/></svg><svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/></svg>- thông qua CSS
Mã:
.bi::before { display: inline-block; content: ""; background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>"); background-repeat: no-repeat; background-size: 1rem 1rem;
}Vn-Z.vn team tổng hợp tham khảo https://blog.getbootstrap.com/2020/08/28/bootstrap-icons-stable/
