본문 바로가기
HTML&CSS

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

by 복숭아 우유씨 2022. 9. 26.

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

 

https://github.com/tancredi/fantasticon

 

GitHub - tancredi/fantasticon: Icon font generation tool

Icon font generation tool. Contribute to tancredi/fantasticon development by creating an account on GitHub.

github.com

 

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교육

구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍 교육, 전국 초중고/대학교 온라인 강의, 기업/

edu.goorm.io

 

 
 
 

댓글