![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_00.jpg)
因此梅干找了許多的工具,最後發現在Visual Studio Code中,只需要安裝Iconfont Previewer這外掛後,就能讓圖示文字的所有圖示顯示出現,甚至還會帶出各圖示的名稱,如此一來就可透過圖示名稱,進到CSS中尋找相對應的圖示名稱,因此若手邊也有不錯的圖示文字檔的朋友,不妨可在VSCode安裝Iconfont Previewer來預覽所有的圖示文字。
Step1
首先開啟VSCode後,進入延伸模組,並輸入iconfont-preview後,找到外掛模組再按「安裝」。
![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_01.jpg)
Step2
在安裝完畢後,將圖示文字的資料夾與CSS資料夾,拖曳到VSCode的檔案總管中。
![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_02.jpg)
Step3
接著開啟fonts資料夾中的.ttf檔,這時在畫面的右邊就會看到所有的圖示。
![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_03.jpg)
Step4
接著再找到喜歡的圖示後,將圖示下方的&#x拿掉,再進入CSS中搜尋,再找到樣式名稱後,再貼到網頁中。
![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_04.jpg)
Step5
鏘~鏘~圖示就會出現在網頁中啦!雖然過程有些繁索,但至少可看到所有的圖示文字,就是方便啦!再也不用擔心沒文件或是文件不見的冏境啦!
![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_05.jpg)
Step6
說明
![梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖](http://photo.minwt.com/img/Content/webdesign/vscode-iconfont-viewer/vscode-iconfont-viewer_06.jpg)