
因此梅干找了許多的工具,最後發現在Visual Studio Code中,只需要安裝Iconfont Previewer這外掛後,就能讓圖示文字的所有圖示顯示出現,甚至還會帶出各圖示的名稱,如此一來就可透過圖示名稱,進到CSS中尋找相對應的圖示名稱,因此若手邊也有不錯的圖示文字檔的朋友,不妨可在VSCode安裝Iconfont Previewer來預覽所有的圖示文字。
Step1
首先開啟VSCode後,進入延伸模組,並輸入iconfont-preview後,找到外掛模組再按「安裝」。

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

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

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

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

Step6
說明
