현재 블로그에는 꽤 많은 아이콘들이 사용되고 있다. 고전적인 아이콘 형식인 GIF 나 JPG, PNG 파일을 이용하지 않고도 아이콘 폰트를 이용하여 확대해도 반응형에서 찌끄러지지 않는 이미지 아이콘들을 다양하게 이용할 수 있어 스킨 뿐만 아니라 본문에서도 다용도로 활용하고 있다.
여기서는 내가 사용하고 싶은 자주 사용하는 아이콘들을 골라서 나만의 아이콘을 만들려고 한다. 다른 깜빡이는 효과를 추가해 넣었지만 빨간하트도 가능하다. 원모양의 시디 아이콘에 회전 효과를 사용할 수도 있다. 남들이 아이콘 폰트를 사용하는걸 보면 뭔가 굉장히 어려울꺼라고 짐작할 수도 있다. 나 또한 그렇게 생각했으니까. 하지만 실제로 나만의 아이콘 모음을 만들어 보면 그리 어려운 수준은 아니다. 설명은 길지만 실제 해보면 단 몇분이면 가능하다. 맘에 드는 아이콘을 고르는게 시간이 걸릴뿐.. -.-;
Fontawesome 같은 웹에서 아이콘폰트를 불러와서 간단하게 사용하는 방법도 있지만 사용할 수 있는 아이콘이 한계가 있어서 (사실 내 맘에 안드는 디자인이라...) 여기서는 스킨에 직접 내가 사용할 아이콘 폰트만 모아 만들어서 사용하려고 한다. 용량이 얼마 되지 않아 블로그에 미치는 영향은 그리 크지 않으니 걱정은 하지 않아도 된다.
아이콘 폰트를 제공하는 사이트는 여러군데가 있지만 요령이 늘면 여러 사이트의 아이콘 폰트를 모아 하나로 만들수도 있다. 그리고 무료 이미지 사이트에서 원하는 아이콘 SVG 만 추가해서 사용할 수도 있다. 맘에 드는 아이콘이 없다면 직접 SVG 형식으로 만들어서 아이콘 폰트를 추가할 수도 있다. 다음과 클리앙, 뽐뿌의 아이콘은 없어서 직접 만들어 보았다. 별짓을 다한다.
활용을 조금만 더 하면 구하지 못할 아이콘은 없을듯하다. 여기서는 https://icomoon.io 라는 곳을 이용해 아이콘 폰트를 만들어 보려고 한다.
1 아이콘 폰트를 만들기 위해 우선 https://icomoon.io 로 이동한다.
2 나만의 아이콘을 만들기 위해서는 홈페이지에서 오른쪽 상단의 빨간 부분 IcoMoon App 을 클릭한다.
3 아이콘들의 창고인 Add Icons From Library 를 클릭한다.
CCZ-CROSS 스킨을 사용중이라면 스킨에 포함된 CCZICON.SVG 란 파일을 컴퓨터에 다운로드 받은 후 위 사이트의 왼쪽 상단에 위치한 보라색의 import icons 버튼을 클릭해서 다운로드한 파일을 열면 설치되어 있는 아이콘 폰트 설정을 그대로 불러온다. 그리고 3번 단계부터 진행하면 된다.
4 다양한 아이콘들의 모음을 볼 수 있다. 하나씩 마음에 드는 것을 ADD 한다.
5 포함된 아이콘 폰트를 보면서 아이콘 폰트 모음중에 Font Awesome 을 우선 Add 해보았다. 위에 화살표 선택 상태에서 포함된 아이콘 폰트를 보면서 원하는 아이콘을 하나씩 선택한다. 아래 Selection 부분에 선택한 아이콘의 수가 표시된다. 원하는 아이콘을 모두 선택하였다면 오른편 아래 Generate Font 를 클릭한다.
6 선택한 아이콘 폰트의 모양과 CSS 에서 사용할 수 있는 코드(사진의 e900, e901 표기)를 확인할 수 있다. 오른쪽 하단의 Font Download 옆에 설정 아이콘 을 클릭한다.
7 설정 화면에서 아이콘 폰트명으로 사용할 이름을 임의대로 적는다. 나의 경우는 sonylove 라는 이름으로 폰트명을 정했다. 설정은 자신이 필요한 대로 선택하면 된다. 나의 경우는 위와 같이 설정해서 저장했다. 설정을 모두 했으면 창을 닫고 Font Download 를 클릭한다.
+ CCZ-CROSS 스킨을 사용중이라면 7 단계는 필요하지 않다. 별도의 설정을 할 필요없이 바로 다운로드 하면 사용하던 그대로 cczion으로 저장된다.
8 다운로드된 파일은 icomoon 과 숫자의 조합으로 된 폴더명으로 생성된다. 필요한 파일은Fonts 폴더의 파일들과 style.css 이다.
9 티스토리의 스킨 HTML/CSS 편집에서 파일올리기를 이용하여 fonts 폴더에 만들어진 위의 eot, svg, ttf, woff 파일들을 업로드한다. 그리고 저장 클릭!!
+ CCZ-CROSS 스킨 사용자는 스킨에서 reset.css 파일을 다운로드 받아 텍스트 에디터로 열어 새로 만든 아이콘 폰트 style.css의 내용을 복사해서 reset.css에 복사한다. 그리고 url 주소는 11단계의 내용을 참고해서 수정한 후 저장해서 스킨에 업로드하면 된다.
10 icomoon 폴더에 다운로드한 style.css 를 텍스트 편집기로 연다. 그리고 내용을 복사해서 티스토리의 CSS 의 아무데나 복사한다. (나중에 수정하기 쉽게 맨 마지막이 좋다)
11 그러나 이대로는 아이콘폰트를 사용할 수 없다. 복사한 후에 몇군데 수정할 부분이 있다. @font-face 의 343번째줄부터 347번째줄까지 티스토리에는 fonts 라는 폴더가 없기 때문에 url 이 모두 잘못된 주소이므로 수정해주어야 한다. 아주 간단하다.
예로 343번째줄
src: url('fonts/sonylove.eot?7jdyg7'); 을 아래와 같이 따옴표(')와 /fonts 폴더명만 지우면 된다. 347번째줄까지 모두 같은 방법으로 하면 된다. format 으로 된 부분은 건들지 말고..
+ 티스토리의 style.css 가 아니라 별도의 CSS 파일에서 폰트 설정을 불러온다면 상황에 맞게 URL 주소를 변경해주면 된다. CCZ-CROSS 스킨의 경우 reset.css 에 아이콘 폰트 설정 정보가 있으므로 font-face 부분을 찾아서 물음표 부분 이후부분만 수정해주고 코드명만 추가해주면 된다.
src: url(./images/sonylove.eot?7jdyg7);
@font-face {
font-family: 'sonylove';
src: url(./images/sonylove.eot?7jdyg7);
src: url(./images/sonylove.eot?7jdyg7#iefix) format('embedded-opentype'),
url(./images/sonylove.ttf?7jdyg7) format('truetype'),
url(./images/sonylove.woff?7jdyg7) format('woff'),
url(./images/sonylove.svg?7jdyg7#sonylove) format('svg');
font-weight: normal;
font-style: normal;
}12 스킨과 본문에서 아이콘 폰트를 이제 사용할 수 있다!! 티스토리 글쓰기 HTML 모드에서 아래와 같은 방법으로 i class 와 icon-이름 을 사용하면 된다. 필요한 곳에 적절히 사용하면 된다. span style 을 이용하여 색상이나 크기 등 다양한 꾸미기도 가능하고.. CSS 에서 아이콘 폰트를 사용하고 싶을때는 사용하고자 하는 부분에 미리 정했던 폰트명 'sonylove' 를 font-family 에서 추가해주고 content 부분에 코드명(e900, e901 등)을 사용하면 된다. HTML 에서 사용할때는 i class 를 사용하고 이때는 Font 명 설정은 필요없다.
+ i 클래스를 사용하지 않고도 클래스명 안에 넣어서도 사용할 수 있다. icon- 형식으로 사용하면 된다. 안되는줄 알았는데 이번에 해보니 된다. 폰트어썸처럼 여러가지 효과 클래스를 추가해서 사용하면 더욱 편리하게 사용할 수 있다.
+ 아이콘 폰트의 css를 업로드하지 않고도 icomoon 사이트에서 만든 주소 링크 css를 블로그에서 주소만 따와서 사용할 수도 있다. 귀찮게 다운로드 받고 수정하고 업로드할 필요도 없다. -.-;
13 작성한 아이콘 폰트 테스트 결과
현재 나는 약 200개 정도의 아이콘을 골라서 폰트를 만들어 사용중인데 안쓰는건 좀 정리해야겠다.
