1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖示文字檔縮圖

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

2022/02/24

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

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


Step1
首先開啟VSCode後,進入延伸模組,並輸入iconfont-preview後,找到外掛模組再按「安裝」。
梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖
Step2
在安裝完畢後,將圖示文字的資料夾與CSS資料夾,拖曳到VSCode的檔案總管中。
梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖
Step3
接著開啟fonts資料夾中的.ttf檔,這時在畫面的右邊就會看到所有的圖示。
梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖
Step4
接著再找到喜歡的圖示後,將圖示下方的&#x拿掉,再進入CSS中搜尋,再找到樣式名稱後,再貼到網頁中。
梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖
Step5
鏘~鏘~圖示就會出現在網頁中啦!雖然過程有些繁索,但至少可看到所有的圖示文字,就是方便啦!再也不用擔心沒文件或是文件不見的冏境啦!
梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖
Step6
說明
梅問題-Visual Studio Code 安裝 Iconfont Previewer 外掛,讓在VSCode可直接預覽ttf圖像文字檔縮圖