작성일자
카테고리 워드프레스/워드프레스 완벽입문 워밍업

웹디자인에서 아이콘의 사용은 시각적인 효과로 더욱 멋진 웹사이트로 표현할 수 있는 수단입니다. 대부분의 경우 아이콘은 배경이 투명한 png 파일을 사용하지만 요즘 들어서 폰트를 이용한 아이콘의 사용이 늘고 있습니다. 이것은 CSS3의 @font-face 룰을 이용해서 서버에 폰트를 저장해두고 이 폰트를 가져와 원하는 곳에 배치하도록 합니다. 폰트는 알다시피 크기 조정도 자유롭고 색상 변경도 가능합니다. 이미지를 사용한다면 포토샵 같은 이미지 편집툴로 색상을 변경해서 파일을 만들어야 하지만 폰트는 CSS로 얼마든지 조정이 가능한 것이죠. 그러니 아이콘을 폰트로 사용한다는 것은 그만큼 웹디자인의 자유로움을 가져다주는 것입니다.


아래의 링크를 클릭하면 파일을 내려받을 수 있는 사이트로 이동합니다.


http://fortawesome.github.com/Font-Awesome/



배너의 우측에 있는 우산 이미지는 이 폰트 아이콘을 사용한 것입니다. 폰트처럼 사용할 수 있으니 크기를 늘리면 되는 것이죠. 더구나 폰트는 벡터라서 크기를 늘려도 외곽선을 부드럽게 만드는 효과도 있습니다. 이미지라면 흐리게 나오고 경계선이 매끄럽지 못하죠. 노란색의 버튼을 클릭해서 파일을 내려받습니다.



압축을 풀고 docs 폴더까지 들어가면 위처럼 나옵니다. index.html 파일을 클릭하면 이전의 웹사이트와 같은 화면이 나옵니다. 이것을 열어놓고 요소검사를 해서 폰트아이콘을 삽입해야합니다. 위 assets 폴더를 선택하고 Ctrl+C키를 눌러 복사합니다.



자식 테마 폴더에서 Ctrl+V키를 눌러 붙여넣습니다. 이 폴더 안의 폰트 파일과 CSS 파일을 워드프레스에서 사용하려면 header.php에 링크를 만들어줘야합니다. 



편집기에서 헤더 파일을 선택하고 <?php wp_head(); ?> <!-- wp_head();-->의 바로 위에 빈 줄을 만들고 코드를 삽입합니다. 


<link rel="stylesheet" media="print" type="text/css" href="http://localhost/wordpress31/wp-content/themes/eclipse-child/assets/css/font-awesome.css" />


빨간색 부분은 너무 길기도 하고 이 테마를 다른 곳에 설치한다면 URL의 경로가 달라질 것입니다. 그래서 자식테마의 폴더를 표시하는 템플릿 태그를 대체해주면 이런 문제를 해결할 수 있습니다. 위 빨간색 부분을 다음의 템플릿 태그로 교체합니다.


<link rel="stylesheet" media="print" type="text/css" href="<?php bloginfo( stylesheet_directory ); ?>/assets/css/font-awesome.css" />


원래는 스타일시트나 자바스크립트를 워드프레스에서 사용하려면 functions.php에 등록을 해줘야하지만 여기서는 간편하게 위처럼 사용합니다. 



위에서 삽입한 스타일시트를 텍스트 편집기에 열어보면 위처럼 여러종류의 폰트 파일이 연결돼있습니다. 각 웹브라우저별로 인식가능한 폰트를 여러개 저장해놓고 인식시키는 것이죠. 이들 폰트 파일은 테마 폴더에 붙여넣은 assets 폴더의 font 폴더에 있습니다.



폰트 아이콘을 사용하는 방법은 폰트 아이콘 폴더 안에 있는 index.html을 웹브라우저에 열고 아래로 스크롤하면 아이콘과 클래스 선택자가 있습니다. 이를 삽입하고자 하는 곳에 <i> 태그를 이용해서 입력해주기만 하면 되지만 테마 폴더에는 여러개의 파일이 있어서 어느 것을 선택해서 어디에 삽입하는지 찾기도 어렵고 대부분의 요소는 함수에 의해 만들어지기 때문에 불가능 한 것도 있습니다. 그래서 여기서는 스타일시트를 복사해서 직접 입력하는 방법을 택합니다. 위처럼 요소검사를 해서 스타일시트 창에서 우선 ::before라고 된 부분을 찾아서 선택자와 중괄호 끝까지 블럭 설정해서 복사합니다.


편집기의 스타일시트 창에 붙여넣고 그 다음으로 두번째 빨간 박스 부분만 복사해서 이전에 붙여넣은 중괄호 안에 삽입합니다. 그러면 다음과 같이 됩니다. before 앞의 세미콜론은 하나는 제거하고 content 속성의 따옴표 안에서 f 앞의 기호는 역슬래시( \ )로 바꿔줍니다.


.icon-hdd:before {

content: "\f0a0";

font-family: FontAwesome;

font-weight: normal;

font-style: normal;

display: inline-block;

text-decoration: inherit;

}


여기서 .icon-hdd라는 선택자만 교체해주면 되는 것입니다.


글 목록 앞에 이 아이콘을 배치하기 위해서 요소검사를 합니다. 선택자를 알아내기 위해서죠. archives-2 라는 div 태그 안에 있는 h2 태그입니다. 그러면 이 두 개를 이어서 다음과 같이 입력합니다.


#archives-2 h2:before {

content: "\f0a0";

font-family: FontAwesome;

font-weight: normal;

font-style: normal;

margin-right:10px;

display: inline-block;

text-decoration: inherit;

}


아이디 선택자는 CSS에서 샤프 기호를 사용합니다. 그리고 아이콘과 글자와의 간격을 띄우기 위해 margin-right 를 사용했습니다. 위와 같이 하면 글목록이라는 글자 앞에 아이콘이 삽입됩니다. 그러면 색상을 바꿔보겠습니다.

#archives-2 h2:before {
content: "\f0a0";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin-right:10px;
color:red;
display: inline-block;
text-decoration: inherit;
}

색상을 빨간색으로 설정했습니다. 색은 16진수 코드를 사용하지만 아는 영어 이름의 색상코드를 입력해도 됩니다. 그러면 이번에는 크기를 늘려 보겠습니다.

#archives-2 h2:before {
content: "\f0a0";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin-right:10px;
color:red;
font-size:200px;
display: inline-block;
text-decoration: inherit;
}

시험삼아서 엄청 크게 늘렸습니다. 그랬더니 아래처럼 나옵니다. 위에서 처음에는 폰트 색상이나 크기를 정하지 않아도 적정한 크기로 나온 것은 부모 요소로부터 이러한 속성을 상속 받기 때문입니다. 특별히 이곳에만 다르게 하려면 위처럼 변경하면 되는 것이죠.


아주 부드러운 외곽선으로 깨끗하게 나옵니다. 이미지로 했다면 이런 효과는 나올 수가 없죠. 더구나 CSS3의 폰트 그림자 효과도 적용할 수가 있습니다.

#archives-2 h2:before {
content: "\f0a0";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin-right:10px;
color:red;
font-size:200px;
display: inline-block;
text-decoration: inherit;
text-shadow:3px 3px 10px #fff;
}

3개의 숫자에서 처음은 x 축, 두번째는 y 축, 세번째는 블러 효과이고 네번째는 그림자 색상입니다.



다른 곳에도 아이콘을 삽입하려면 위에서처럼 요소검사를 해서 선택자를 알아내고 아이콘의 스타일시트를 복사해서 사용하면 됩니다.


여기까지 하나의 테마를 갖고 수정해서 사용하는 방법을 알아봤습니다. 손을 대자면 끝없이 진행될 것 같아서 여기서 마치기로 합니다. 부족한 부분은 지금까지 한 내용이나 제 글중에 CSS 기초부분을 참고해서 혼자서 마무리 하면 됩니다. 질문 하셔도 되고요.


지금까지 진행한 부분은 인디자인으로 편집해서 전자책으로 만들 것이니 며칠 기다리면 공개될 것입니다. 한 방문자님이 이미 출판한 서적을 전자책으로 출판할 수 없는가 질문을 해주셨는데 전자책은 암호화 문제도 있고 피지컬 책(Physical Book: 전자책의 반대 개념)이 나온 이상 전자책은 인쇄비용이 들지 않기 때문에 가격이 거의 반 이상으로 내려갈 것인데 그러면 피지컬 책을 사려고 하지 않죠. 그래서 여러가지로 출판사의 애로사항이 있습니다. 위 과정은 전자책으로 나오게 되니 휴대폰이나 태블릿 PC로 간편하게 볼 수도 있을 것입니다. 워밍업과정이라고 해서 자세한 설명을 생략했습니다. 그래서 이해가 안되는 부분도 있겠지만 한편으로는 너무 긴 내용이 되기도 합니다. 페이지로 얼마나될지는 모르겠지만 150페이지가 된다면 거의 책 한권의 수준이 될 것 같습니다. 


테마 수정 코드-->


테마수정코드1125-1.txt


저작자 표시 비영리 변경 금지
신고
BlogIcon 요리왕뚱이

좋은글 잘봤어요 ㅎㅎ 우리 좋은정보 공유해요 ^^

BlogIcon OCer

언제나 좋은 정보 감사합니다. 시간 날 때 다 바꿔줘야 할 듯. ^^

BlogIcon 베누시안

안녕하세요. 좋게 봐주셔서 감사합니다.

BlogIcon 메리앤

오늘도 잘 배우고 갑니다.
날씨가 우중충 하네요. ㅜㅜ
그래도 좋은 하루 되시기 바랍니다. :)

BlogIcon 베누시안

안녕하세요. 네 비도 오고 바람도 많이 불고 스산한 날씨입니다. 님도 좋은 하루 되세요.

BlogIcon toko jaket distro

관리자의 승인을 기다리고 있는 댓글입니다

초보

잘 봤습니다

리형

포토샵에서는 font-awesome 폰트를 사용할수 없나요?
다운 받아보니 ttf 파일이 있어서 c:window의 font폴더에 넣고, 포샵에서 글자를 쳐보니
다 네모모양으로 깨져서 보이더라구요. 디자이너가 포토샵에서 메뉴의 아이콘들은 font-awesome로 시안을 미리 만들어야 하는데 말이져.

BlogIcon 베누시안

ttf를 우클릭해서 설치를 하고 윈도우 시작메뉴에서 시스템 도구로 가면 문자표라는 것이 있습니다. 여기서 설치한 폰트를 선택하면 모든 폰트가 나타납니다. 원하는 폰트를 선택, 복사해서 포토샵에서 텍스트 툴을 이용해서 붙여넣고 포토샵에서 해당 폰트를 선택하면 됩니다. 아래 링크를 참고하세요.

http://martian36.tistory.com/407

BlogIcon David Kim

html과 css에 오늘 입문하려다가 튕겨나간 David라고 합니다.. 웹폰트와 아이콘폰트는 비슷한 개념인건가요 다른건가요? 흥미롭습니다. 좋은 포스팅 감사드립니다. 답변에 미리 감사드립니다:)

BlogIcon 베누시안

폰트라는 의미에서는 같습니다. 웹폰트는 일반 폰트를 용량을 줄여서 웹디자인에 사용되도록 만듭니다. 웹브라우저별로 인식하는 확장자가 달라서 여러가지 확장자로 만들어줘야하죠. 아이콘 폰트는 아이콘을 폰트 형태로 만든 것이니 이것도 웹폰트로 사용할 수 있습니다.

BlogIcon club

다 읽었는데 큰 도움이 됬습니다 감사합니다^^

BlogIcon 베누시안

도움이 됐다니 다행입니다.

포에버준

끝까지 따라왔습니다.
정말 많은것을 알게되었고 모두에게 공유해 주시는점 깊히 감사드립니다.

마지막 단계인 Font Awesome 아이콘 폰트 사용하기에서 한가지 해결하지 못했습니다.
아이콘 폰트가 익스플로러에서는 제대로 나타나지만 크롬에서는 ▢(사각형)으로 나타나고 파이어 폭스에서는 사각형안에 FORO라는 글자가 나타납니다.
여기서 검색도 해보고 여러군데 정보도 찾아봤지만 어렵네요ㅜㅜ

언젠가는 해결할수 있는 능력이 생기리라 믿고 일단은 전진하기로 했습니다.
정말 감사드리고 하시는일 더욱더 번창하시길 바랍니다.
감사합니다.

BlogIcon 베누시안

이 튜토리얼이 오래 된 것이라서 버전이 많이 달라서 코드도 다릅니다. 웹브라우저마다 다르게 나오는 것은 해당 웹브라우저가 지원하는 폰트 아이콘의 포맷이 설정이 달라서 그럴 수 있습니다. 어디까지나 연습이니 하나의 웹브라우저에서만이라도 나온다면 그것으로 만족하시고 넘어가시는 것이 좋습니다. 더 자세한 지식을 연구하다보면 해결될 것입니다.

양파

제가 구글크롬으로 소스를보고 필요없는 문단을 없애려는데 워드프레스 테마에 없앤걸 어떻게 적용하죠?
추가는 알겠는데ㅠ

티스토리 툴바