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

相关推荐
这儿有一堆花1 天前
IDE 开发的一天
ide
swear011 天前
VSCODE 插件 rust-analyzer 使用遇到的问题 快捷键查看定义
ide·vscode·rust
pengzhuofan1 天前
IntelliJ IDEA 常用快捷键
java·ide·intellij-idea
麦克马1 天前
Visual Studio Code 控制台乱码问题
vscode
Jackson@ML1 天前
用Visual Studio Code最新版开发C#应用程序
ide·vscode·c#
阿猿收手吧!1 天前
windows本机vscode通过ssh免密登录远程linux服务器 && git push/pull 免密
服务器·windows·vscode
sonrisa_1 天前
下载CUDA Toolkit和VS后,配置vscode
ide·vscode·编辑器
无锋起浪1 天前
Vscode参数设置及使用记录ubuntu2204(更新中)
ide·vscode·编辑器
咯哦哦哦哦1 天前
vscode arm交叉编译 中 cmakeTools 编译器设置
linux·arm开发·vscode·编辑器
通域1 天前
解决启动IDEA后CPU 及内存占用过高配置调整
java·ide·intellij-idea