Mẫu đăng ký Bootstrap CodePen

Cài đặt các biểu tượng Bootstrap—bao gồm SVG, biểu tượng sprite và phông chữ biểu tượng—với npm hoặc Composer. Sau đó, chọn cách bạn muốn bao gồm các biểu tượng với

composer require twbs/bootstrap-icons

CDN

Bao gồm biểu định kiểu phông chữ biểu tượng—trong trang web của bạn hoặc thông qua

2 trong CSS—từ CDN của chúng tôi và bắt đầu sau vài giây. ví dụ như

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

Cách sử dụng

Biểu tượng Bootstrap là SVG, vì vậy bạn có thể đưa chúng vào HTML của mình theo một số cách tùy thuộc vào cách thiết lập dự án của bạn. Chúng tôi khuyên bạn nên sử dụng

3 (và tùy chọn là

4) để dễ dàng thay đổi kích thước thông qua

5

nhúng

Nhúng các biểu tượng của bạn vào trong HTML của trang của bạn (trái ngược với tệp hình ảnh bên ngoài). Ở đây chúng tôi đã sử dụng một

6 và

7 tùy chỉnh

Ma

Sử dụng sprite SVG để chèn bất kỳ biểu tượng nào thông qua phần tử

8. Sử dụng tên tệp của biểu tượng làm định danh phân đoạn (e. g. ,

9 là

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

0). SVG sprite cho phép bạn tham chiếu một tệp bên ngoài tương tự như phần tử

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

1, nhưng với sức mạnh của

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

2 để dễ dàng tạo chủ đề

Đứng lên. Đã xảy ra sự cố với Chrome trong đó

8 không hoạt động trên các miền

hình ảnh bên ngoài

Sao chép các SVG Biểu tượng Bootstrap vào thư mục bạn chọn và tham chiếu chúng như hình ảnh bình thường với phần tử

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

1

phông chữ biểu tượng

Phông chữ biểu tượng với các lớp cho mọi biểu tượng cũng được bao gồm cho Biểu tượng Bootstrap. Bao gồm các phông chữ web biểu tượng trong trang của bạn thông qua CSS, sau đó tham chiếu tên lớp nếu cần trong HTML của bạn (e. g. ,

8)

Sử dụng

5 và

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

7 để thay đổi giao diện biểu tượng

CSS

Bạn cũng có thể sử dụng SVG trong CSS của mình (đảm bảo thoát khỏi bất kỳ ký tự nào, chẳng hạn như

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

8 đến

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

9 khi chỉ định giá trị màu hex). Khi không có kích thước nào được chỉ định thông qua

6 và

7 trên

8, biểu tượng sẽ lấp đầy khoảng trống có sẵn

Thuộc tính

3 là bắt buộc nếu bạn muốn thay đổi kích thước biểu tượng bằng

4. Lưu ý rằng thuộc tính

5 là bắt buộc

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

tạo kiểu

Có thể thay đổi màu bằng cách đặt lớp

6 hoặc CSS tùy chỉnh

  ...

khả năng tiếp cận

Đối với các biểu tượng hoàn toàn trang trí, hãy thêm

7. Nếu không, hãy cung cấp một văn bản thay thế phù hợp. Tùy thuộc vào phương pháp bạn đang sử dụng để thêm các biểu tượng và nơi bạn đang sử dụng chúng (e. g. dưới dạng hình ảnh độc lập hoặc dưới dạng nội dung duy nhất của nút hoặc điều khiển tương tự), có nhiều cách tiếp cận khả thi khác nhau. Đây là vài ví dụ

0

1

Làm việc với SVG

Các SVG rất tuyệt để làm việc cùng, nhưng chúng có một số điểm kỳ quặc đã biết để giải quyết. Với nhiều cách có thể sử dụng SVG, chúng tôi chưa bao gồm các thuộc tính và giải pháp thay thế này trong mã của mình

Các vấn đề đã biết bao gồm

• Các SVG nhận tiêu điểm theo mặc định trong Internet Explorer và Edge Legacy. Khi nhúng các SVG của bạn, hãy thêm

  8 vào phần tử
  8. Tìm hiểu thêm về Stack Overflow

• Khi sử dụng SVG với các phần tử

  @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

  1, trình đọc màn hình có thể không thông báo chúng dưới dạng hình ảnh hoặc bỏ qua hình ảnh hoàn toàn. Bao gồm một
  1 bổ sung trên phần tử

  @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

  1 để tránh mọi vấn đề.

• Sprite SVG bên ngoài có thể không hoạt động chính xác trong Internet Explorer. Sử dụng polyfill svg4everybody nếu cần