Visual Studio Code 安裝 Iconfont Previewer 外掛，讓在VSCode可直接預覽ttf圖示文字檔縮圖

　　梅干不定期都會買些還不錯看的模版，一部分除了可研究一下別人的寫法外，另一部分則是看看前流行的模組有那些，最後則是UI圖示，而有些若是使用知名的第三方的向量文字模組時，還可以尋到的相關的圖示資訊，若是作者自行繪製，並且又沒有附說明文件時，就得透過CSS的類別名稱，去猜圖示的符號實在有些不便。

因此梅干找了許多的工具，最後發現在Visual Studio Code中，只需要安裝Iconfont Previewer這外掛後，就能讓圖示文字的所有圖示顯示出現，甚至還會帶出各圖示的名稱，如此一來就可透過圖示名稱，進到CSS中尋找相對應的圖示名稱，因此若手邊也有不錯的圖示文字檔的朋友，不妨可在VSCode安裝Iconfont Previewer來預覽所有的圖示文字。　

---

Step1
首先開啟VSCode後，進入延伸模組，並輸入iconfont-preview後，找到外掛模組再按「安裝」。

---

Step2
在安裝完畢後，將圖示文字的資料夾與CSS資料夾，拖曳到VSCode的檔案總管中。

---

Step3
接著開啟fonts資料夾中的.ttf檔，這時在畫面的右邊就會看到所有的圖示。

---

Step4
接著再找到喜歡的圖示後，將圖示下方的&#x拿掉，再進入CSS中搜尋，再找到樣式名稱後，再貼到網頁中。

---

Step5
鏘～鏘～圖示就會出現在網頁中啦！雖然過程有些繁索，但至少可看到所有的圖示文字，就是方便啦！再也不用擔心沒文件或是文件不見的冏境啦！

---

Step6
說明