Hướng dẫn bootstrap icon github - biểu tượng bootstrap github

Các biểu tượng bootstrap

Đây là một triển khai Jahia 8 của thư viện biểu tượng nguồn mở miễn phí, chất lượng cao với hơn 1.800 biểu tượng. Các biểu tượng có thể được nhúng, được sử dụng như một hình ảnh SVG bên ngoài hoặc sprite SVG hoặc như một phông chữ web.

Nội dung chính Show

• Các biểu tượng bootstrap
• Cài đặt
• Cách sử dụng
• Biểu tượng
• iconWidth hoặc ____
• Kích thước

Cài đặt

Vui lòng đọc hướng dẫn chuyên dụng trên https://academy.jahia.com/training-kb/tutorials/administrators/installing-a-module và chọn mô-đun biểu tượng bootstrap từ cửa hàng.

Cách sử dụng

Để thêm biểu tượng bootstrap, nhấp vào danh mục biểu tượng bootstrap, sau đó chọn thành phần biểu tượng

Sau khi hoàn thành, bạn sẽ tìm thấy 3 thuộc tính:

Biểu tượng

bootstrapIcon

${bi:getSvg(bootstrapIcon,widthStyle)}

Chọn một biểu tượng từ danh sách

usage

Chọn cách hiển thị biểu tượng. Điều này có thể được nhúng, hình ảnh bên ngoài, phông chữ biểu tượng hoặc sprite

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16" style="width:50%;height:auto"> 
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path> 
</svg>

Nhúng

Chiều rộng hình ảnh kích thước orfont

<img src="/modules/bootstrap-icons/img/arrow-left.svg" style="width:50%;height:auto" alt="arrow-left">

iconWidth hoặc ____

Tìm cách chọn chiều rộng của hình ảnh của bạn. Để sử dụng phông chữ biểu tượng, bạn sẽ chọn kích thước phông chữ

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16" style="width:50%;height:auto"> 
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path> 
</svg>

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16" style="width:50%;height:auto"> 
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path> 
</svg>

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

<link id="staticAssetCSS1" rel="stylesheet" href="/modules/bootstrap-icons/css/bootstrap-icons.css" media="screen" type="text/css"/>

Nếu phông chữ biểu tượng đã được chọn, một liên kết đến bootstrap-iCons.css sẽ được thêm vào tiêu đề của trang của bạn và thẻ

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16" style="width:50%;height:auto"> 
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path> 
</svg>

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16" style="width:50%;height:auto"> 
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"></path> 
</svg>

<i class="bi-arrow-left" viewBox="0 0 16 16" style="font-size:.875em"></i>

Kích thước

Rất nhỏ

.75em

<svg class="bi" fill="currentColor" style="width:50%;height:auto">
    <use xlink:href="/modules/bootstrap-icons/icons/bootstrap-icons.svg#arrow-left"/>
</svg>