아이콘 라이브러리 - FontAwesome

출처: 아이콘 라이브러리 - FontAwesome 발행일: 2023-8-2 최종 편집: 2025-4-12 원래 섹션: 사이트 설정

머리말

Notion 데이터베이스에는 icon 필드가 있습니다. 이 필드는 메뉴 아이콘을 지정하는 데 사용됩니다.

Untitled

그런데 이 알 수 없는 코드는 무엇을 의미할까요?

NotionNext는 기본적으로 FontAwesome을 아이콘 라이브러리로 사용합니다. FontAwesome은 많은 무료 아이콘을 제공하는 온라인 아이콘 폰트 라이브러리입니다.

4.8.4 이후 새 버전에서는 IconFont 아이콘도 지원해 더 많은 아이콘 커스터마이즈가 가능해졌습니다. 다만 사용 방식은 조금 더 복잡합니다.

Untitled

아래 링크를 클릭하면 더 많은 아이콘을 미리 볼 수 있습니다.

Search all of Font Awesome's free and Open Source icons. Then use them wherever and however you want.

FontAwesome 아이콘 목록에서 원하는 아이콘을 찾아 상세 화면을 엽니다.

Untitled

아래 코드 박스에 필요한 코드가 표시됩니다.

예를 들어 fa-solid fa-user를 Notion의 icon 필드에 붙여 넣으면 사용자 아이콘이 표시됩니다.

채워지지 않은 사용자 아이콘은 다음과 같습니다.

Untitled

아이콘 타입은 축약할 수 있습니다.
예를 들어 Notion DB에 설정한 기본 사용자 아이콘 fas fa-user는 본질적으로 fa-solid fa-user와 같은 아이콘이며, 아이콘 타입만 축약된 것입니다.

Untitled