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,之后重新下载。

相关推荐
三天不学习7 小时前
Cursor vs Trae vs VSCode:2025终极IDE横评,谁才是开发者的效率之选?
ide·vscode·编辑器
驴友花雕7 小时前
【花雕动手做】CanMV K230 AI视觉识别模块之使用CanMV IDE调试运行人脸代码
ide·人工智能·单片机·嵌入式硬件·canmv k230 ai视觉·canmv ide 人脸代码
猫头虎7 小时前
又又又双叒叕一款AI IDE发布,国内第五款国产AI IDE Qoder来了
ide·人工智能·langchain·prompt·aigc·intellij-idea·ai编程
weixin_387545647 小时前
Antigravity 上手指南:打造 VS Code 风格的 AI IDE
ide·人工智能
程序届的伪精英7 小时前
IDE TRAE介绍与使用
ide·人工智能
奇树谦7 小时前
2025 嵌入式 AI IDE 全面对比:Trae、Copilot、Windsurf、Cursor 谁最值得个人开发者入手?
ide·人工智能·copilot
咖啡续命又一天7 小时前
Trae CN IDE 中 Python 开发的具体流程和配置总结
开发语言·ide·python·ai编程
一苓二肆10 小时前
代码常用工具使用
git·vscode·docker·github·vim
jiayong2314 小时前
Markdown编辑完全指南
java·编辑器
jimy115 小时前
切换、退出GitHub account with Copilot,github copilot账号,自动补全没额度了
vscode·copilot