icomoon 웹폰트 활용 하기

https://icomoon.io

Icon Font & SVG Icon Sets ❍ IcoMoon

티스토리에서 제공하는 스킨의 버튼 이미지도 Ico Moon 의 웹폰트를 활용하고 있다.
그러나 기본적으로 임베드 되어있는 폰트의 경우 아이콘의 갯수가 제한적이다.
이를 확장하여 추가로 여러가지의 아이콘을 표기해 본다.

먼저 홈페이지에서 폰트 파일을 다운받는다.
Free 버전으로도 충분히 다양한 아이콘을 사용할 수 있다.

IcoMoon-Free-master.zip  파일을 다운받았다면
Font 폴더에서 웹폰트의 활용을 위해 필요한 파일은 .ttf , .css 두가지 이다.
css 파일은 demo-files 하위에 있다.

티스토리 블로그에 사용하려고 하는 경우 폰트파일과 CSS파일을 업로드 해주어야 한다.
이때 주의할점은 기존에 사용하고있는 스타일과 충돌하지 않기 위하여 폰트 및 CSS파일의 이름을 바꿔준다.
추가로 CSS 파일에 작성되어있는 클래스 명도 변경한다.

@font-face {
    font-family: 'icomoon_free'; /* 기존과 다른 폰트 명으로 지정 */
    src: url('icomoon_free.ttf') format('truetype'); /* 변경한 파일명 */
    font-weight: normal;
    font-style: normal;
}

.icomoon { /* 클래스 명 수정 */
	/* @font-face 에 변경한 font-family 이름으로 수정 */
    font-family: 'icomoon_free' !important; 
    ...
}

.icomoon-home:before { /* 클래스 명 수정 (기본은 .icon-home )*/
    content: "\e900";
}

 

파일업로드 후 import 한다. 그 뒤 클래스명만 지정하면 끝!
본 블로그의 푸터에 있는 LINK 컨텐츠에 활용되어있다.

• 블로그 관리 > 꾸미기 > 스킨 편집 > HTML 편집 > link_slink 검색

<!-- 스킨 HTML -->
<a href="" 
	class="link_slink icomoon icomoon-" 
    title=""></a>

 

• 블로그 관리 > 링크 > 나의링크

이때 사이트 이름을 클래스 명과 동일하게 지정해야 개별 아이콘을 적용할 수 있다. (대소문자구분주의)
https://icomoon.io/#preview-free 의 프리뷰에서 검색하면 확인이 편리하다.
다운받은 CSS에도 이름이 동일한지 한번 더 확인한 뒤 적용.

.icomoon-linkedin
.icomoon-github

기본 스타일의 일반 텍스트 링크에서 아이콘 링크로 변경되었다 !

 

아이콘의 경우 이미지 파일을 포지션 지정하여 사용할 수 있지만, 폰트 파일로 임베드하여 사용하는 것이 스타일 지정이나 반응형웹 적용에 유리하다.

 

커스텀 css 를 적용하여 아래와 같이 글에 삽입하면?   ==>   

<span class="icomoon icomoon-github thema_color"></span>
<span class="icomoon icomoon-linkedin thema_color"></span>

 

티스토리의 서식을 활용하면 태그 삽입이 훨씬 편리하다 ! 단 커스텀 스타일이 글작성화면에서는 보이지 않으니 미리보기로 확인하기 !