Section 3-2 - 반응형 티스토리 스킨 만들기 - fontawesome 티스토리 적용

아이콘을 하나하나 만들기 힘드니 레이아웃 잡기 전에 font-awesome.css를 사용할 수 있게 준비하겠습니다.

포스트 제일 하단에 파일을 함께 올려뒀습니다.

 

STEP 1. 폰트어썸(font-awesome) 파일 다운로드

우선 폰트 어썸 파일을 다운받습니다.

http://fontawesome.io/get-started/

폰트어썸 다운로드

 

다운로드 받은 후 폴더 목록을 살펴보면 아래와 같습니다.

폰트어썸(font-awesome-4.7.0) 파일목록

 

필요한 파일은 CSS와 fonts폴더안의 font들입니다.

 

STEP 2. font-awesome.min.css 파일 수정

우선 css 폴더안의 font-awesome.min.css 파일을 수정합니다.

 

폰트어썸_css수정

 

 

font-awesome.css 는 font-awesome fonts를 사용하기 때문에 해당경로를 css와 같은 경로에 위치시키기 때문에 ../fonts/가 들어가 있는 모든 소스를 삭제한다. (수정 사항은 6개 정도 됩니다. - 에디터 사용시 모두 바꾸기로 한번에 수정하세요.)

 

 

STEP 3. css / font 파일들을 스킨 폴더로 이동

수정이 완료되면 font-awesome.min.css 파일을 티스토리 블로그 스킨 images 폴더로 복사

폰트어썸_css 이동

 

 

그리고 기존에 다운 받았던 font-awesome의 fonts 폴더 안에 fonts들을 티스토리 블로그 스킨 images 폴더로 복사합니다.

폰트어썸_fonts파일이동

 

그리고 마지막으로 skin.html파일에서 font-awesome.min.css 파일을 사용하겠다고 선언하면~끝!

 

 

index.xml 파일만 추가하면 티스토리 스킨을 등록 할 수 있다.

다음에는 index.xml 파일을 작성하여 스킨을 등록하겠습니다.