iconfont 사용하기 (fantasticon) / 404오류(엑스박스)

스스로를 위한 기록으로 간략하게 기록하였습니다.

 

https://github.com/tancredi/fantasticon

GitHub - tancredi/fantasticon: Icon font generation tool

 

1. fantasticon 설치하기

npm install -g fantasticon

 

2. 간단 사용법

 

1) 원하는 위치에 폴더 만들기

2)

fantasticon my-icons -o icon-dist

예시)

간단사용법 입력 후 실행된 상태

 

3) 하기 그림과 같이 파일 생성되면 css 파일을 link 걸어서 사용할 수 있다.

생성된 파일 목록

3. 주의 / 404오류

위의 파일에서 css파일을 다른 파일에 옮겨서 사용한다던지 하게 되면 파일 경로를 잘 확인해야한다.

(엑스박스가 뜰 경우 크롬 개발자 도구 네트워크에서 확인시 404오류임을 확인할 수 있었다.)

파일 경로 확인시 css파일 내부의 src url까지 아래와 같이 확인해줘야 한다.

 

기존파일

 

파일위치등을 변경시 여기도 같이 손봐줘야 햔다.

참고글

https://edu.goorm.io/qna/12276

구름EDU - 모두를 위한 맞춤형 IT교육