[教學] Boootstrap5.0 全新的 IconFont 圖示文字設計，漂亮有設計感且有三種的嵌入方式

　　Boostrap3.0時就已內建了IconFont圖示文字，且裡面的圖示都是平常設計網頁常會使用的一些指示符號，雖然說圖示相當的齊全，但設計的風格有些生硬，因此梅干個人不是很愛，反倒是比較常用Fontawesome、IcoMoon，也不知是因為使用的人不多，所以在Bootstrap4.0則將IconFonts給拿掉了，直到Bootstap5.0又再度將IconFons給納入。

而Bootstrap5.0新版的圖示，梅干個人覺得還挺漂亮且有設計感，同時此次要使用Boostrap5.0的圖示時，除了像以往整包嵌入網頁外，還新增了SVG檔的下載，或是將SVG格式直接寫入網頁中，讓使用變得更加彈性，接下來梅干就來分享，如何將SVG的格式直接寫入到網頁中，並且設定它的大小與顏色。

---

Bootstrap5.0 Icons

---

Step1
在進入Boostrap5.0的圖示頁面後，可以點右上的Donwload鈕，將全部的圖示下載並嵌到網頁中。

---

Step2
當把頁面向上滾動時，就會看到各式各樣的圖示，可看到新版的圖示，不但變得比較圓滑且有設計感。

---

Step3
找到喜歡的圖示後，除了可下載SVG檔外，也可像平常的方式嵌入，而這邊梅干要介紹第三種方式，那就是將SVG碼匯入網頁中。

---

Step4
接著把SVG的格式，貼到網頁中，立即就會顯示該圖示的效果。

---

Step5
當要調整SVG圖示的大小時，則是使用width與height，顏色則是color 而不是background喔！用這種方式，最大的好處就是用多少嵌入多少，且也省得載入CSS樣式，直接嵌入到網頁中，而使用此方法無論有無使用Bootstrap都可使用該圖示的，相當的方便喔！