티스토리 블로그 아이콘 폰트 사용하기

내가 사용하는 아이콘 폰트는 ionicons에서 제공하는 폰트다. 이유는 CDN을 제공해서 사용법도 간단하고 깔끔한 아이콘이 많기 때문이다. 우측 사이드바에 보면 공지사항이나 카테고리 글자 앞에 아이콘 모양으로 있는 게 아이콘 폰트다. 일반적으로 어떠한 크기던 얼마든지 변경 가능하고 CSS를 이용해 다양한 효과를 줄 수 있는 게 특징이다. 또, 호출 태그도 간단해서 사용하기도 편하다.

http://ionicons.com/

위 사이트에 접속해서 우측 상단 Usage 메뉴를 클릭하고 스크롤을 조금 내려보면 아래와 같은 CDN이 있는데, 이를 복사해서 블로그 관리 > 스킨 편집 > HTML 탭의 </body> 태그 바로 위에 아래와 같이 삽입한다.

<script src="https://unpkg.com/ionicons@4.4.1/dist/ionicons.js"></script>
</body>

그다음, 아래 코드를 CSS 탭 제일 아래에 삽입한다. /* */로 표기된 주석은 지워도 된다.

ion-icon {
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 11pt;		/* 폰트 사이즈 */
  padding: 0px 5px 0px 0px;	/* 순서대로 위 오른쪽 아래 왼쪽 시계방향에 공백을 주는 옵션 */
}

내가 사용하는 아이콘 폰트 CSS의 일분데, 여기서 자신이 원하는 색상으로 나타내고 싶으면 color 속성을 추가하거나 여백, 폰트 사이즈는 수정해서 사용하면 된다. <ion-icon> 태그도 마찬가지로 <ion-icon> 말고 자신이 편한 걸로 지정해도 된다. 아이콘 폰트를 제공하는 사이트에 따라 해당 태그가 다를 수 있는데, 나는 처음부터 지정된 태그가 편해서 평소 그냥 사용한다.

이제 아이콘 폰트를 사용하기 위한 세팅은 끝났고, 특정 클래스명으로 호출해서 사용할 수 있게 되었다. 아이콘 페이지에서 원하는 아이콘을 클릭하면 위 사진과 같이 태그가 나온다. 예를 들어 저 하트 아이콘을 출력하고 싶으면 <ion-icon name="heart"></ion-icon> 를 입력하면 가 출력된다.

마찬가지로 스킨 편집의 HTML 탭이나 글을 작성할 때도 HTML 화면에서 <ion-icon name="원하는 아이콘 폰트의 이름"></ion-icon> 을 입력하면 등과 같은 다양한 아이콘도 출력할 수 있다. 추가로 iOS 스타일을 사용하고 싶다면 아이콘 폰트의 이름 앞에 -ios를 추가해주면 된다. <ion-icon name="ios-heart"></ion-icon>

참고로 아이콘 폰트는 글 작성 화면에서는 보이지 않지만 미리보기나 글을 발행하면 나타난다.