ootstrap 開(kāi)源了首套 SVG 圖標(biāo)庫(kù) Bootstrap Icons，其團(tuán)隊(duì)表示這是有史以來(lái)第一次擁有自己的圖標(biāo)庫(kù)，此圖標(biāo)庫(kù)起初專門(mén)針對(duì)其從表單控件到導(dǎo)航等組件和文檔進(jìn)行定制設(shè)計(jì)和構(gòu)建，現(xiàn)在可以免費(fèi)用于任何項(xiàng)目，無(wú)論此項(xiàng)目是否使用了 Bootstrap。

既然 Bootstrap Icons 是 SVG 圖標(biāo)庫(kù)，因此它們可以快速、輕松地?cái)U(kuò)展，并且可以配合 CSS 的使用進(jìn)行個(gè)性化定制。雖然它們是為 Bootstrap 設(shè)計(jì)的，但可以在任何項(xiàng)目中使用。不過(guò)要注意的是，它們現(xiàn)在尚處于 alpha 階段，未來(lái)可能會(huì)出現(xiàn)重大變化。

Bootstrap Icons 官網(wǎng)提供了檢索圖標(biāo)種類(lèi)的搜索框，用戶可根據(jù)需求使用關(guān)鍵字（英文）進(jìn)行查找。

根據(jù)自己的設(shè)置，可以通過(guò)多種方式將 Bootstrap Icons 添加到項(xiàng)目：

• 將 SVG 復(fù)制粘貼為內(nèi)嵌式的 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>

• 通過(guò)<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>

• 通過(guò) CSS 引入

.什么是字體圖標(biāo)

可以看作一種特殊字體，其展示的是圖標(biāo)，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標(biāo)加載快、不變形。也可以看作是矢量格式的圖標(biāo)。

2.字體圖標(biāo)常用免費(fèi)資源

（1）iconmoon字體圖標(biāo)庫(kù)：https://icomoon.io/app

（2）阿里iconfont字體圖標(biāo)庫(kù)：https://www.iconfont.cn/

（3）font-awesome字體圖標(biāo)庫(kù)：

3.字體圖標(biāo)使用步驟

以iconmoon為例

（1）選擇需要的圖標(biāo)并下載

1）在fonts文件夾下有四種類(lèi)型的字體文件，每種字體文件兼容瀏覽器的種類(lèi)不同

a）.tff格式（TrueTypeFont），美國(guó)蘋(píng)果公司和微軟公司共同開(kāi)發(fā)的，在Windows和Mac操作系統(tǒng)中為默認(rèn)字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開(kāi)放字體格式），是一種網(wǎng)頁(yè)所采用的字體格式標(biāo)準(zhǔn)，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設(shè)計(jì)用來(lái)在網(wǎng)頁(yè)使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語(yǔ)言，用來(lái)描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

其他字體

e）.otf格式（Open Type Font），Microsoft和Adobe公司開(kāi)發(fā)的，.otf格式比.ttf更為強(qiáng)大，可以把PostScript字體嵌入到TrueType中。

2）字體轉(zhuǎn)換

https://www.fontke.com/tool/convfont/

（2）字體圖標(biāo)的引入

1）把字體放到項(xiàng)目的相應(yīng)位置

將下載解壓后的fonts文件夾放到項(xiàng)目路徑下

2）在html頁(yè)面中引入字體

利用CSS的@font-face屬性，引入外部字體；

在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。

在html的style標(biāo)簽中引入如下代碼：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?8l3wc0');
  src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
    url('fonts/icomoon.woff?8l3wc0') format('woff'),
    url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3）為元素用該字體

span {
        font-family: "icomoon";
    }

4）為元素添加內(nèi)容

復(fù)制demo.html中需要的圖標(biāo)，如下，將其作為元素的內(nèi)容。

<span>?</span> 

（3）新增字體圖標(biāo)的引入

當(dāng)利用iconmoon選用字體圖標(biāo)時(shí)，如果有新增的字體圖標(biāo)需要加入，則需要用到.json文件，如下，在原先選擇的基礎(chǔ)上，再選擇新選擇的字體圖標(biāo)，然后再下載使用。