Fastboot 포스팅 제목 아이콘 바꾸는 방법

포스팅에 들어가며

 현재 필자는 Fastboot 스킨을 사용중이다. 늘 그렇듯 Fastboot 관련 포스팅을 적을 때는 꾸미는 재미가 있어서 즐겁다. 소스 하나로 모양이 바뀌고 색이 바뀌고 디자인이 바뀐다. 이러한 소소한 재미도 있고 필자의 글을 보기 위해 찾아오시는 분들에게 조금이라도 더 나은 디자인과 가독성을 제공하고자 노력중이다. 또한 Fastboot 스킨을 적용한 티스토리 사용자들에게도 도움이 되었으면 하는 바람이다.

Step 1. 포스팅 제목 아이콘 무엇을 말하는가?

 필자가 이야기하는 포스팅 제목은 위와 같이 포스팅을 눌렀을 때 제목 가장 앞쪽에 위치하는 아이콘을 말한다. 현재는 세줄이 가로로되어있는 모양을 하고있다. 이 부분을 Fastboot 스킨에서는 여러가지로 변경할 수 있으며 사용자가 마음에 드는 아이콘을 사용하면 된다.

Step 2. 어떤모양? 어떻게 바꿔야할까?

 일단 어떤 모양들이 있는지 보자. 지금 이미지를 하나하나 올려드리진 못하지만 Fastboot를 어느 정도 사용해보신 분들이라면 대략적인 이미지가 머릿속으로 떠오를 것이라 판단이된다. 일단 'html의 소스명 - 모양'으로 표기를 해보았다.

해당 아이콘 목록은 "친절한 효자손"님의 티스토리 블로그에서 참고하였습니다.

comments -> 대화모양(2개)

flash -> 번개모양

pencil -> 연필모양

comment -> 대화모양(1개)

category -> 목록모양

default -> 새파일모양

tags -> 책갈피모양

calendar -> 달력모양

folder - 폴더모양

random -> 랜덤재생모양

link -> 연결고리모양

chart-o -> 그래프모양

rss -> 와이파이모양

search -> 돋보기모양

credit-card -> 카드모양

 그럼 저 코드를 어떻게 적용해야할까? 필자의 경우 포스트를 쓴다는 계념으로 연필 모양으로 변경해보려한다. 늘 그렇듯 디자인 변경에 있어서는 관리자의 HTML / CSS 편집 메뉴로 들어가도록 하자.

 HTML 창에서 Ctrl + F 를 눌러 '포스트의 본문 시작'을 검색한다. 하나의 결과만 나오므로 걱정하지 않아도 된다. 그럼 위 그림을 참고하여 클래스명 값 중 bars를 주목하자. bars를 위에 알려드린 html 소스명을 입력하면 해당 모양이 출력되는 것이다. 필자의 경우 연필로 변경한다하였으니 bars를 pencil로 변경하였다.

Step 3. 포스팅 제목 확인

 변경 후 적용된 제목 아이콘 모습니다. 위의 HTML 소스를 적용하여 얼마든지 변경이 가능하니 참고하여 자신에게 맞는 아이콘으로 변경하여 보자.

2017/10/13 - [티스토리 집중탐구] - Fastboot 티에디션을 통한 홈화면 꾸미기

2017/10/12 - [티스토리 집중탐구] - Fastboot 홈화면 + 카테고리 목록 모드 바꾸기

2017/10/07 - [티스토리 집중탐구] - 티스토리 반응형 스킨 Fastboot 1.6.2 설치 방법

제 블로그의 내용이 도움이 되셨나요?

여러분의 공감과 댓글이 아잇티에게 큰 힘이됩니다 :)

▼▼▼▼▼▼▼▼▼▼▼