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

相关推荐
小韩博2 小时前
IDEA的简单使用
java·ide·intellij-idea
@才华有限公司4 小时前
vscode使用翻译插件分享
ide·vscode·编辑器
lichong9515 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
吹个口哨写代码6 小时前
处理文本编辑器存的json格式报错问题,对编辑器存的字段进行转换处理,再通过json返回
java·编辑器·json
向上的车轮7 小时前
PyCharm的优秀插件有哪些特性?
ide·pycharm·dubbo
小蜗子7 小时前
vscode 侧边文件夹名字体大一点
ide·vscode·编辑器
HIT_Weston8 小时前
149、【OS】【Nuttx】【周边】效果呈现方案解析:VSCode 打开外部链接(二)
vscode·os·nuttx·文档渲染
我先去打把游戏先8 小时前
VSCode通过SSH连接到Ubuntu虚拟机失败“找不到ssh安装”问题解决
笔记·vscode·单片机·嵌入式硬件·学习·ubuntu·ssh
CSND7408 小时前
linux离线环境局域网远程ssh连接vscode
linux·vscode·ssh
UCoding8 小时前
我们来学AI编程 -- vscode开发java
java·vscode·ai编程