投稿
  1. 谷达鸭首页
  2. 投稿

Visual Studio Code 安装 Iconfont Previewer 插件，让在VSCode可直接预览ttf图标文字文件缩略图 (vscode 中icon fonts怎么用)

technews • • 投稿
梅问题-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图像文字文件缩图

Step6
说明

梅问题-Visual Studio Code 安装 Iconfont Previewer 外挂，让在VSCode可直接预览ttf图像文字文件缩图
赞 (0)
打赏 微信扫一扫 微信扫一扫
technewstechnews认证作者
0 0

相关推荐

发表评论

登录后才能评论