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

相关推荐
xx155802862xx38 分钟前
vscode 打开csv乱码
ide·vscode·编辑器
静听夜半雨1 小时前
CANoe入门——3、新建LIN工程及LIN DataBase(LDF文件)的创建
网络·数据库·c++·编辑器
明·煜1 小时前
解决VSCode每次SSH连接服务器时,都需要下载vscode-server
ide·vscode·ssh
信号处理学渣1 小时前
Git命令行中vim的操作
git·编辑器·vim
Magnum Lehar8 小时前
ApophisZerg游戏引擎项目目录展示
人工智能·vscode·编辑器·游戏引擎
亦双城的双子娴13 小时前
基于ueditor编辑器的功能开发之重写ueditor的查找和替换功能,支持滚动定位
编辑器
电子云与长程纠缠14 小时前
Unreal Niagara制作SubUV贴图翻页动画
学习·ue5·编辑器·贴图·niagara
敖行客 Allthinker15 小时前
VS Code 智能代理模式:重塑开发体验
vscode·代理模式
界面开发小八哥16 小时前
Java开发工具IntelliJ IDEA v2025.1——全面支持Java 24、整合AI
java·ide·人工智能·intellij-idea·idea
帅云毅17 小时前
文件上传--解析漏洞和编辑器
笔记·学习·安全·web安全·编辑器·php