vscode的字体图标库-icomoon

icomoon官网下载地址:SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon Easily mange your icons and integrate them in your projects. Browse free icons or import your own SVG icons to export as icon font, SVG, PNG, sprite and more.https://icomoon.io/https://icomoon.io/

打开网站:

显示自己选取的图标数:

点击下载图标:

下载完解压后:

先把fonts文件复制放在自己编写的HTML文件下:

注意:fonts文件是复制而不是拖进去,拖进去会造成,当你打开demo.html显示不出原本图标的样子;

如果目录没有放对网页会出现:

然后打开style.css,复制如下代码放到style标签里面用来字体声明:

再打开demo.html选取自己要用的图标:

如下所示:

还有定义span样式:

运行结果如下:

最后,后期需要添加图表样式,可以在官网点击如下,上传selection.json添加图标。

弹出点yes,然后选要添加的图标,

从63多添加到74,之后重新下载。

相关推荐
空の鱼3 小时前
java开发,IDEA转战VSCODE配置(mac)
java·vscode
沈梦研5 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
硬汉嵌入式6 小时前
《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风,开源流体吊坠,物联网在军工领域的应用,Unicode字符压缩解压
vscode·matlab·开源
涛ing8 小时前
21. C语言 `typedef`:类型重命名
linux·c语言·开发语言·c++·vscode·算法·visual studio
踏上青云路11 小时前
xceed PropertyGrid 如何做成Visual Studio 的属性窗口样子
ide·wpf·visual studio
菜泡泡@11 小时前
vscode 自用插件
ide·vscode·编辑器
九品神元师14 小时前
jupyter配置说明
linux·ide·jupyter
无码不欢的我17 小时前
使用vscode在本地和远程服务器端运行和调试Python程序的方法总结
ide·vscode·python
想要打 Acm 的小周同学呀18 小时前
前端Vue2项目使用md编辑器
前端·编辑器·vue2·markdown 语法