✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
图标字库
category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 08:15 AM
summary
icon
前言
您可以看到notion数据库中有一个icon字段,这是用来制定菜单的图标
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1c812059-6be0-4e07-9d60-637c8e8f261c%2FUntitled.png?table=block&id=cb4da99a-01b1-4df9-970f-88a7badb9c79&t=cb4da99a-01b1-4df9-970f-88a7badb9c79&width=577&cache=v2)
但是 这个神秘代码是什么意思?
Fontawesome 图标字体库
NotionNext使用fontawesome作为图标库,这是一个在线的图标字体库提供了大量的免费图标
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa164f7cb-bf98-4992-9abf-de14d3f86cce%2FUntitled.png?table=block&id=f7ee0ccc-6051-43da-82d0-f4fce590325d&t=f7ee0ccc-6051-43da-82d0-f4fce590325d&width=1543&cache=v2)
点击下方链接预览更多图标
如何使用
在Fontawesome的图标列表中,找到你喜欢的图标,打开查看详情
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9d8c2800-feb0-4d65-9e69-e1897ddc2248%2FUntitled.png?table=block&id=55d7c52b-8c93-4761-b9db-63798ab7a4bc&t=55d7c52b-8c93-4761-b9db-63798ab7a4bc&width=1350&cache=v2)
下方的代码框中就是你要的神秘代码了
例如
fa-solid fa-user
这串代码粘贴到您的notion中的icon字段,即可显示出这个用户的图标。注意
- 图标名称由两部分构成,由空格隔开,必须完整复制才能使用
例如
fa-solid fa-user
这个图标前缀-图标类型 | 后缀-图标名 |
fa-solid | fa-user |
说明图标是填充的 | 图标名称 |
还有一个无填充的用户图标如下
前缀-图标类型 | 后缀-图标名 |
fa-regular | fa-user |
说明图标是填充的 | 图标名称 |
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbcf6bf03-9b75-438a-a6cb-1d22d619e7d3%2FUntitled.png?table=block&id=7164efc0-b3d8-4c92-bde3-dea1b346af21&t=7164efc0-b3d8-4c92-bde3-dea1b346af21&width=1258&cache=v2)
- 图表类型可以缩写
例如我在notion库中配置的默认用户图标是
fas fa-user
,其本质上就是 fa-solid fa-user
这个图标,只不过图标类型被缩写了。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa44b416e-9450-4991-b294-2c6f2a656f38%2FUntitled.png?table=block&id=ec7edc1a-9d8c-488f-9e0d-55c7aae3f80b&t=ec7edc1a-9d8c-488f-9e0d-55c7aae3f80b&width=577&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7d5a6ee9-59b3-4271-aebc-521e54cd18b2%2FUntitled.png?table=block&id=9d020b2d-2752-4156-b1a7-287ffc071299&t=9d020b2d-2752-4156-b1a7-287ffc071299&width=1247&cache=v2)
Loading...
Last update: 2023-08-02