NotionNext帮助手册图标库-IconFont
category
tags
type
status
slug
summary
date
Last edited time
Apr 12, 2025 01:21 AM
icon
password
如需使用IconFont图标，请先将NotionNext 升级至 ≥4.8.4
IconFont
这是阿里巴巴提供的矢量图标库。相比默认的fontawesome图标，iconfont有更多的色彩丰富的图标素材可供选择。
使用方法
- 首先在Notion_Config 中添加以下配置
配置名 | 配置值 |
ENABLE_ICON_FONT | true |
截图效果如下：
- 在你的菜单图表中，填写iconfont的图标id
iconfont的图标id默认都是
icon-xxx这样的格式
id从iconfont后台获取
配置后的效果如下；
原先默认支持的fontawesome图标，我默认将所有图标都通过cdn导入，因此无需用户手动导入图标。
而iconfont的图标千千万，这里需要将对应的图标下载并上传到notionnext项目中，然后填写这个图标id才能生效。接下来的文章中，我将介绍如何下载自己喜欢的图标，并且导入项目。
如何导入iconfont图标？
- 注册登录Iconfont
- 通过搜索或浏览推荐找到你想要的图标
- 将喜欢的图标添加入库
点击那个类似购物车的图标，点击后你的右上角购物车数量就会增加1。
- 全部图标添加完成后，点击右上角购物车图标
这里列出所有刚刚添加的图标，不喜欢的话也可以单击图标进行删除。如果确认图标无误，我们点击下方的添加至项目
- 加入已有的项目
这里我事先创建了一个项目名为”测试“，直接选中，并点击确定即可。
如果没有项目，则点击右上方的加号，新建一个项目。项目是所有图标的合集，便于打包下载。
下载项目文件
在上一步中，点击确定后，页面会自动跳转的”我的项目中心“并选中当前的项目：
注意切换成Symbol模式，这样你就能看到所有图标的id，例如下图中，我添加了三个图标，他们的id分别为
icon-jumao icon-gengduomaochong icon-lanmao 。这个我们在后面配置到notion中会使用到。
点击右侧 ”下载至本地“按钮
下载完成后会是一个zip压缩包，解压后会是一个文件夹
文件夹的内容就是我们要的图标素材：
需要注意，里面文件名叫 demo 和 demo_index 的这两个文件是用来本地预览的，将demo_index文件用浏览器打开可以查看下载的图标是否正确。
打开demo_index文件会显示这样一个网页供您检查内容：
上传素材
文件夹中，剩下的四个文件(iconfont.css，iconfont.js，iconfont.json，iconfont.ttf)，我们需要上传到项目的 /public/webfonts 目录下：
上传文件的方式有两种，一是通过开发工具下载整个NotionNext工程，然后将文件放入项目，并同步代码到gihubt中，这种方法适合具有一定开发能力的用户。
另一种则是直接在github中上传文件：
在github中上传图标素材
- 打开你的github中的NotionNext项目页面：
- 点击进入public目录
- 再点击进入webfonts目录
- 依次点击Add files 和 Upload files 按钮
- 在上传页面中，将除了demo的四个文件一起拖拽至上传窗口中；
- 稍等几秒上传完成后，点击下方的commit changes即可
- 最后检查
完成后你的项目/public/webfonts目录下应该会出现以下几个文件
如何使用？
- 在Notion_Config 中添加以下配置
配置名 | 配置值 |
ENABLE_ICON_FONT | true |
截图效果如下：
- 在你的菜单图表中，填写图标id
图标id默认都是
icon-xxx这样的格式
id从iconfont后台获取
配置后的效果如下；
Prev
图标库-FontAwesome
Next
代码块风格
Loading...