图标字库

category
tags
type
status
slug
date
password
Last edited time
Aug 2, 2023 03:54 AM
summary
icon

前言

您可以看到notion数据库中有一个icon字段，这是用来制定菜单的图标
notion image
但是 这个神秘代码是什么意思？

Fontawesome 图标字体库

NotionNext使用fontawesome作为图标库，这是一个在线的图标字体库提供了大量的免费图标
notion image
点击下方链接预览更多图标
Free Icons | Font Awesome
Search all of Font Awesome's free and Open Source icons. Then use them wherever and however you want.
Free Icons | Font Awesome
https://fontawesome.com/search?o=r&m=free
Free Icons | Font Awesome

如何使用

在Fontawesome的图标列表中，找到你喜欢的图标，打开查看详情
notion image
下方的代码框中就是你要的神秘代码了
例如 fa-solid fa-user 这串代码粘贴到您的notion中的icon字段，即可显示出这个用户的图标。
 
 

注意

  1. 图标名称由两部分构成，由空格隔开，必须完整复制才能使用
      2. 例如 fa-solid fa-user 这个图标
      前缀-图标类型
      后缀-图标名
      fa-solid
      fa-user
      说明图标是填充的
      图标名称
      还有一个无填充的用户图标如下
      前缀-图标类型
      后缀-图标名
      fa-regular
      fa-user
      说明图标是填充的
      图标名称
      notion image
  1. 图表类型可以缩写
      2. 例如我在notion库中配置的默认用户图标是 fas fa-user ，其本质上就是 fa-solid fa-user 这个图标，只不过图标类型被缩写了。
      notion image
      notion image
       
文字字体代码块风格
  • Twikoo
  • Giscus
  • Cusdis