ootstrap 開源了首套 SVG 圖標庫 Bootstrap Icons，其團隊表示這是有史以來第一次擁有自己的圖標庫，此圖標庫起初專門針對其從表單控件到導航等組件和文檔進行定制設計和構建，現在可以免費用于任何項目，無論此項目是否使用了 Bootstrap。

既然 Bootstrap Icons 是 SVG 圖標庫，因此它們可以快速、輕松地擴展，并且可以配合 CSS 的使用進行個性化定制。雖然它們是為 Bootstrap 設計的，但可以在任何項目中使用。不過要注意的是，它們現在尚處于 alpha 階段，未來可能會出現重大變化。

Bootstrap Icons 官網提供了檢索圖標種類的搜索框，用戶可根據需求使用關鍵字（英文）進行查找。

根據自己的設置，可以通過多種方式將 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 引入

.什么是字體圖標

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

2.字體圖標常用免費資源

（1）iconmoon字體圖標庫：https://icomoon.io/app

（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/

（3）font-awesome字體圖標庫：

3.字體圖標使用步驟

以iconmoon為例

（1）選擇需要的圖標并下載

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

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

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

其他字體

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

2）字體轉換

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

（2）字體圖標的引入

1）把字體放到項目的相應位置

將下載解壓后的fonts文件夾放到項目路徑下

2）在html頁面中引入字體

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

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

在html的style標簽中引入如下代碼：

@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）為元素添加內容

復制demo.html中需要的圖標，如下，將其作為元素的內容。

<span>?</span> 

（3）新增字體圖標的引入

當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。

片格式分類

圖片格式

位圖圖片: bmp、jpg、gif、png

矢量圖圖片: 以svg格式為代表, 可縮放矢量圖形(ScalabelVector Graphics)。 SVG是一種使用XML格式定義的圖像。

什么是傳統方式的圖標

圖標采用圖片格式, 有bmp、jpg、gif、png等文件格式

大小改變后, 可能會出現鋸齒效果, 影響美觀

什么是字體圖標

圖標全部字體格式

可以使用color、font-size..., 改變圖標的顏色、大小等樣式

利用CSS雪碧圖處理圖標

該技術的全稱是: CSS Sprite, 又稱css雪碧圖

使用font+html實現字體圖標的優缺點

優點: 輕量性、靈活性、兼容性好, 是目前被廣泛使用的技術

缺點: 大多數的圖標字體只能被渲染成單色

什么是svg格式?

它的英文全稱為 Scalabel Vector Graphics, 意思為可縮放的矢量圖形。

svg矢量圖庫官網有哪些?

阿里巴巴矢量圖標庫官網: http://www.iconfont.cn

icommoon圖標庫官網: https://icomoon.io/app/#/select