
榜哥不定期都会买些还不错看的模版,一部分除了可研究一下别人的写法外,另一部分则是看看前流行的模组有那些,最后则是UI图标,而有些若是使用知名的第三方的向量文字模块时,还可以寻到的相关的图标信息,若是作者自行绘制,并且又没有附说明文件时,就得通过CSS的类别名称,去猜图标的符号实在有些不便。
因此榜哥找了许多的工具,最后发现在Visual Studio Code中,只需要安装Iconfont Previewer这外挂后,就能让图标文字的所有图标显示出现,甚至还会带出各图标的名称,如此一来就可通过图标名称,进到CSS中寻找相对应的图标名称,因此若手边也有不错的图标文字文件的朋友,不妨可在VSCode安装Iconfont Previewer来预览所有的图标文字。
Step1
首先开启VSCode后,进入延伸模块,并输入iconfont-preview后,找到外挂模块再按安装。

Step2
在安装完毕后,将图标文字的文件夹与CSS文件夹,拖曳到VSCode的文件总管中。

Step3
接着开启fonts文件夹中的.ttf文件,这时在画面的右边就会看到所有的图标。

Step4
接着再找到喜欢的图标后,将图标下方的&#x拿掉,再进入CSS中搜寻,再找到样式名称后,再贴到网页中。
