css字體圖標不顯示的原因：bootstrap小圖標怎麼使用

經歷了 5 個 alpha 版本後，Bootstrap Icons 已於近日正式發佈 v1.0.0 穩定版。目前該圖標庫已擁有超過 1100 個圖標，團隊計劃在即將發佈的小版本中再為其增加數百個圖標。

自第五個 alpha 版本發佈以來，團隊已經重新繪製了超過三分之一的圖標，主要是因為對路徑和形狀進行了微調。這裡的大部分重繪和改進都是為圖標字體(icon font)做準備，但遺憾的是，由於從 SVG 生成字體的工具未夠完善，所以圖標字體被推遲到了 v1.1.0 版本。

安裝

通過 npm 安裝：

npm i bootstrap-icons

或者從 GitHub 下載新版本，或僅下載 SVG 文件（不包含倉庫的其他文件）。

用法

根據自己的設置，可以通過多種方式將 Bootstrap Icons 添加到項目：

• 將 SVG 複製粘貼為內嵌式的 HTML 元素

<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"/></svg>

• 通過<img>元素引用

<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

• 使用 SVG sprite

<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>

• 通過 CSS 引入

.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;
}