NotionNext 문서

Appearance

아이콘 라이브러리 - IconFont ​

출처: 아이콘 라이브러리 - IconFont 발행일: 2025-4-11 최종 편집: 2025-4-12 원래 섹션: 사이트 설정 요약: NotionNext에서 IconFont를 설정하는 방법

IconFont 아이콘을 사용하려면 먼저 NotionNext를 ≥4.8.4로 업그레이드하세요.

IconFont ​

IconFont는 Alibaba가 제공하는 벡터 아이콘 라이브러리입니다. 기본 FontAwesome 아이콘보다 색상이 풍부한 아이콘 소재를 더 많이 선택할 수 있습니다.

image.png

사용 방법 ​

  1. 먼저 Notion Config에 아래 설정을 추가합니다. 화면 예시는 다음과 같습니다.

image.png

  1. 메뉴 아이콘 필드에 IconFont 아이콘 ID를 입력합니다. IconFont의 아이콘 ID는 기본적으로 icon-xxx 형식입니다.

image.png

ID는 IconFont 대시보드에서 가져옵니다.

image.png

설정 후 효과는 다음과 같습니다.

image.png

기본 FontAwesome 아이콘은 모든 아이콘을 CDN으로 가져오도록 되어 있어 사용자가 수동으로 아이콘을 가져올 필요가 없습니다.

반면 IconFont 아이콘은 매우 많기 때문에, 사용할 아이콘을 다운로드해 NotionNext 프로젝트에 업로드한 뒤 아이콘 ID를 입력해야 적용됩니다. 아래에서는 원하는 아이콘을 다운로드하고 프로젝트에 가져오는 방법을 설명합니다.

IconFont 아이콘을 가져오는 방법 ​

  1. IconFont에 가입하고 로그인합니다.

IconFont - Alibaba 벡터 아이콘 라이브러리

IconFont는 벡터 아이콘 다운로드, 온라인 저장, 형식 변환 등을 제공하는 아이콘 라이브러리입니다.

  1. 검색하거나 추천 목록을 둘러보며 원하는 아이콘을 찾습니다.

image.png

  1. 원하는 아이콘을 보관함에 추가합니다. 장바구니처럼 보이는 아이콘을 클릭하면 오른쪽 위 장바구니 수량이 1 증가합니다.

image.png

  1. 모든 아이콘을 추가한 뒤 오른쪽 위 장바구니 아이콘을 클릭합니다. 방금 추가한 모든 아이콘이 표시되며, 원하지 않는 아이콘은 클릭해 삭제할 수 있습니다. 아이콘이 맞다면 아래의 프로젝트에 추가 버튼을 클릭합니다.

image.png

  1. 기존 프로젝트에 추가합니다. 여기서는 미리 만든 프로젝트를 선택하고 확인을 클릭합니다.

image.png

프로젝트가 없다면 오른쪽 위 더하기 버튼을 눌러 새 프로젝트를 만듭니다. 프로젝트는 모든 아이콘의 모음이며, 패키지로 다운로드하기 쉽게 해 줍니다.

오른쪽 위에서 새 프로젝트 만들기새 프로젝트 이름 입력 후 확인

프로젝트 파일 다운로드 ​

이전 단계에서 확인을 클릭하면 페이지가 자동으로 “내 프로젝트 센터”로 이동하고 현재 프로젝트가 선택됩니다.

image.png

Symbol 모드로 전환하세요. 그러면 모든 아이콘 ID를 볼 수 있습니다. 예를 들어 아래 화면에서는 세 아이콘의 ID가 각각 icon-jumao, icon-gengduomaochong, icon-lanmao입니다. 이후 Notion 설정에 사용합니다.

image.png

오른쪽의 “로컬로 다운로드” 버튼을 클릭합니다.

image.png

다운로드가 끝나면 zip 압축 파일이 생성되고, 압축을 풀면 폴더가 나옵니다.

image.png

폴더 내용이 필요한 아이콘 소재입니다.

image.png

주의할 점은 폴더 안의 demo, demo_index 파일은 로컬 미리보기용이라는 것입니다. demo_index 파일을 브라우저로 열면 다운로드한 아이콘이 올바른지 확인할 수 있습니다.

demo_index 파일을 열면 다음과 같은 확인용 웹페이지가 표시됩니다.

image.png

소재 업로드 ​

폴더에서 남은 네 파일(iconfont.css, iconfont.js, iconfont.json, iconfont.ttf)을 프로젝트의 /public/webfonts 디렉터리에 업로드해야 합니다.

파일을 프로젝트에 업로드

업로드 방법은 두 가지입니다. 하나는 개발 도구로 NotionNext 전체 프로젝트를 내려받은 뒤 파일을 프로젝트에 넣고 GitHub에 코드를 동기화하는 방식입니다. 이 방법은 어느 정도 개발 경험이 있는 사용자에게 적합합니다.

다른 방법은 GitHub에서 직접 파일을 업로드하는 것입니다.

GitHub에서 아이콘 소재 업로드 ​

  1. GitHub의 NotionNext 프로젝트 페이지를 엽니다.

image.png

  1. public 디렉터리로 들어갑니다.

image.png

  1. 다시 webfonts 디렉터리로 들어갑니다.

image.png

  1. Add files와 Upload files 버튼을 순서대로 클릭합니다.

image.png

  1. 업로드 페이지에서 demo를 제외한 네 파일을 함께 업로드 창으로 드래그합니다.

image.png

  1. 몇 초 기다려 업로드가 끝나면 아래의 commit changes를 클릭합니다.

image.png

  1. 마지막으로 확인합니다. 완료 후 프로젝트 /public/webfonts 디렉터리 아래에 다음 파일들이 있어야 합니다.

image.png

어떻게 사용하나요? ​

  1. Notion Config에 아래 설정을 추가합니다. 화면 예시는 다음과 같습니다.

image.png

  1. 메뉴 아이콘 필드에 아이콘 ID를 입력합니다. 아이콘 ID는 기본적으로 icon-xxx 형식입니다.

image.png

ID는 IconFont 대시보드에서 가져옵니다.

image.png

설정 후 효과는 다음과 같습니다.

image.png

원문 링크 ​

https://docs.tangly1024.com/article/notion-next-iconfont