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

相关推荐
guhy fighting18 小时前
pycharm 切换版本和窗口cmd看到的版本不一致问题解决
ide·python·pycharm
山峰哥20 小时前
查询优化案例:从慢查询到闪电般的查询速度
数据库·sql·性能优化·编辑器·深度优先
π同学21 小时前
ESP-IDF+vscode开发ESP32第二讲——console
vscode·esp32·console
计算机安禾1 天前
【C语言程序设计】第35篇:文件的打开、关闭与读写操作
c语言·开发语言·c++·vscode·算法·visual studio code·visual studio
多加点辣也没关系1 天前
Claude Code 安装与配置(详细教程)
ide·ai
Austin_YB1 天前
VScode中配置Python环境
ide·vscode·python
今天也是爱大大的一天吖1 天前
vscode迁移插件至cursor的三个法子
ide·vscode·编辑器·cursor
汤姆yu1 天前
IDEA使用通义灵码做现有项目迭代开发保姆级教程
java·ide·intellij-idea·灵码
阴暗扭曲实习生1 天前
135编辑器素材管理系统的技术架构
架构·编辑器
易水寒陈1 天前
使用vscode开发stm32
ide·vscode·stm32