워드프레스 – Font Awesome 폰트 아이콘 사용하기

아이콘은 대부분 이미지로 된 것을 사용하지만 요즘은 아이콘 폰트를 만들어 사용하기도 합니다워드프레스 3.5버전에 포함될 새로운 기본 테마인 Twenty Twelve에 이런 방법을 사용할 수도 있다고 하는군요. 워드프레스닷컴(http://wordpress.com/i/noticons/example.html)에는 이미 사용하고 있으며 오픈 소스 개발자들을 위한 무료 웹호스팅 서비스인 Github(https://github.com/styleguide/css/7.0). 의 경우 많은 폰트 아이콘을 사용할 수 있는데 무료 공개되지는 않았습니다.

Font Awesome은 폰트로 만들어진 아이콘으로 다음 장부터 나오게 될 트위터 부트스트랩과 호환되도록 만들어졌으며 부트스트랩을 사용하지 않더라도 별개로 사용할 수 있습니다. 일반적으로 아이콘으로 사용하는 이미지 파일은 투명기능을 제공하는 PNG파일을 사용하지만 비트맵 파일이라서 크기를 변경하면 해상도가 달라져서 선명하지 않지만 폰트는 벡터이므로 크기를 늘리거나 줄여도 선명한 이미지가 나타납니다. 또한 이미지를 이용하면 사용될 때마다 HTTP Request로 인해 페이지 로딩시간이 많이 걸립니다. 그래서 모든 아이콘을 하나의 이미지에 담아 스프라이트(Sprites)로 만들어 사용하기도 합니다. 폰트 아이콘은 한번 로딩되면 추가적인 HTTP Request가 필요하지 않고 크기를 변화시켜도 선명한 화질로 표시되며 폰트의 성질을 갖고 있어서 색상변화도 자유롭습니다.

 

구글 검색을 해보면 여러종류의 아이콘 폰트가 검색되며 그중에서도 Font Awesome의 사용법에 대해 알아봅니다. 이 아이콘 폰트는 210개로 되어 있고 지속적으로 추가되고 있으며 오픈소스이지만 CC(Creative Common License)의 규약에 제한되므로 배포가 자유롭고 상업적 이용도 가능합니다. 하지만 이를 사용한 웹페이지에 Credit(출처)를 달아야하는 단점이 있습니다. Font Awesome 홈페이지(http://fortawesome.github.com/Font-Awesome/)로 이동하여 압축파일을 내려받아 압축을 해제하고 폴더 내부로 들어가며 docs폴더가 있습니다. 이곳에 들어가면 assets폴더가 있으며 index.html파일을 클릭하면 웹브라우저에 모든 폰트 아이콘이 나오고 하단에 사용법이 영어로 나옵니다.

head태그 부분에서 스타일 시트 링크 바로 위에 아래처럼 <link rel=”stylesheet” href=”<?php bloginfo( ‘template_directory’ ); ?>/assets/css/font-awesome.css”> 를 복사하여 붙여넣습니다. <?php bloginfo( ‘template_directory’ ); ?>는 테마 폴더를 표시하는 템플릿 태그입니다.

<link rel=”stylesheet” href=”<?php bloginfo( ’template_directory’ ); ?>/assets/css/font-awesome.css”>

<link rel=”stylesheet” href=”http://localhost/wordpress16/wp-content/themes/myfirst-theme/style.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″/>

위와 같이 링크를 만들면 테마가 Font Awesome의 CSS 파일을 인식하게 됩니다. 이 파일은 아래처럼 assets폴더 내부에 있는 font 폴더에 여러 가지 버전의 폰트 파일을 저장해두고 참조하고 있습니다. 이는 웹브라우저마다 다른 형태의 폰트 확장자만 지원하기 때문에 이렇게 하면 모든 버전의 웹브라우저에서 폰트를 인식합니다.

@font-face {

  font-family: ’FontAwesome’;

  srcurl(‘../font/fontawesome-webfont.eot’);

  srcurl(‘../font/fontawesome-webfont.eot?#iefix’) format(‘eot’), url(‘../font/fontawesome-webfont.woff’) format(‘woff’), url(‘../font/fontawesome-webfont.ttf’) format(‘truetype’), url(‘../font/fontawesome-webfont.svg#FontAwesome’) format(‘svg’);

  font-weightnormal;

  font-stylenormal;

}

아이콘의 사용방법은 두가지입니다. 하나는 HTML 페이지에 아이콘을 삽입할 곳에 HTML태그가 있을 때 <i></i>처럼 <i>태그와 클래스 선택자로 해당 아이콘 이름을 입력하는 방법입니다. 두번째 방법은 워드프레스는 어떤 경우에는 HTML 요소를 함수에 의해 자동으로 만들게 되는데 주메뉴의 경우 <?php wp_nav_menu(); ?>라는 템플릿 태그로 li 태그나 a태그를 만들기 때문에 첫번째 방법으로 클래스 선택자를 입력할 수 없습니다. 그래서 CSS의 유사 선택자(Pseudo classes)인 :before나 :after를 이용합니다. 이 선택자는 HTML페이지에 어떤 내용을 직접 입력할 수 없을 때 CSS에서 { content:’입력될 내용’; }처럼 입력하면 내용이 추가됩니다.

 현재 만들고 있는 테마의 메뉴바에서 홈 메뉴에 홈 아이콘을 삽입하기 위해서 Font Awesome 의 docs폴더에 있는 index.html파일을 클릭하여 웹브라우저에 나타나면 홈 아이콘을 찾아 오른쪽 마우스 버튼을 클릭해서 요소검사를 하면 아래처럼 나타납니다. 우측의 CSS패널에서 :before { content:”f015”; } 부분을 찾아 폰트의 UTF 코드를 알아냅니다. 숫자 앞의 기호처럼 보이는 것은 역슬래시(backward slash)입니다.

이번에는 워드프레스 페이지에서 홈 메뉴를 요소검사해서 CSS코드가 들어갈 선택자를 찾아냅니다. 선택자를 특정해야하는데 메뉴의 li 태그에는 워드프레스 템플릿 태그가 자동으로 만들어내는 각각 다른 아이디가 있어서 이 아이디를 사용하면 됩니다. style.css에서  다음과 같이 입력합니다. 폰트가 기본 색상이 검정색이므로 흰색으로 나오도록 color:#fff;를 추가하고 폰트 이름을 추가합니다. 메뉴 이름과 사이를 띄우기 위해 margin-right:10px;을 입력하면 완성입니다. 만일 선택자를 특정하지 않고 #menu-item-449를 제거하면 nav태그 안의 모든 a링크에 대해서 홈 아이콘이 삽입될 것입니다. 이처럼 특정하지 않고 아이콘을 삽입하는 방법은 같은 내용이 있는 목록, 예를 들면 카테고리 목록에 사용하면 좋습니다.

nav ul #menu-item-449 a:before { content: ”f015″; color:#ffffont-family: ’FontAwesome’; margin-right: 10px; }

이번에는 편집링크에 아이콘을 삽입해보겠습니다. 이 편집 링크는 관리자로 로그인했을 때만 나타납니다. Font Awesome 페이지에서 Ctrl+F키를 눌러 edit으로 검색하면 icon-edit을 찾을 수 있습니다. index.php에서 다음과 같이 입력합니다.

<span class=”edit-post-link”><?php edit_post_link(‘<i>편집</i>’); ?></span>

이처럼 템플릿 태그 안에 글자가 있고 이 글자가 블로그 화면에 표시되는 경우는 위처럼 아이콘을 직접 삽입할 수 있습니다. 템플릿 태그 밖에 입력하면 아이콘에 링크가 안생깁니다. <i>태그는 태그 안의 글자를 이탤릭체로 바꾸는 성질이 있습니다. 이 태그가 원래 이탤릭체로 만드는 태그였지만 지금은 태그의 정의가 바뀌었죠. 하지만 이탤릭체로 바꾸는 성질은 그대로 있으므로 글자를 일반 글씨체로 나오도록 하려면 다음과 같이 CSS에서 명령을 내리면 됩니다.

.edit-post-link i { font-style:normal;}

그런데 아이콘과 글자간의 간격이 없어서 자연스럽지 않습니다. <i>태그가 글자를 감싸고 있기 때문에 margin이나 padding을 적용해도 간격이 벌어지지 않죠. 워드프레스는 이처럼 HTML페이지에서 태그와 콘텐츠가 분리되지 않는 경우가 많기 때문에 첫번째 방법으로 아이콘을 삽입하는 것이 좋습니다. 첫번째 방법으로 하면 CSS에서 다음의 코드를 입력하면 됩니다. 이렇게 하면 아이콘이 링크에서 벗어나므로 글자만 클릭이 가능합니다. 아이콘은 장식용으로 사용될 뿐입니다.

.edit-post-link a:before { content: ”f044″; color:#000font-family: ’FontAwesome’; margin-right: 5px; }

Related posts:

  1. 워드프레스 – Font Awesome 폰트 아이콘 사용하기   아이콘은 대부분 이미지로 된 것을 사용하지만 요즘은 아이콘 폰트를 만들어 사용하기도 합니다워드프레스 3.5버전에 포함될 새로운 기본 테마인 Twenty Twelve에...
  2. 워드프레스 – 트위터 부트스트랩으로 테마 수정하기 안녕하세요. 베누시안입니다. 워드프레스 책이  5장까지 완성되고 이제 부록 부분만 남았습니다. 5장은 워드프레스의 기본 테마인 Twenty Eleven을 트위터 부트스트랩으로 모바일 겸용 블로그를...
  3. 워드프레스 테마 만들기 – 자바스트립트와 스타일시트 파일 붙여넣기 5-3-3 자바스트립트와 스타일시트 파일 붙여넣기   Font Awesome의 폰트 아이콘과 트위터 부트스트랩을 사용할 것이므로 관련 파일을 자식테마 폴더에 복사해 붙여넣습니다....
  4. 워드프레스 – 위젯 사용하기 위젯은 여러가지 블로그프로그램에서 다른 의미의 용어로 사용되고 있습니다. 티스토리는 사이드바에 있는 카테고리나 최근글 같은 기본적으로 사용되는 요소를 추가하거나 제거할 수...
  5. 워드프레스 테마 만들기 – 트위터 부트스트랩의 개요 5-1-3 트위터 부트스트랩의 개요   각 파일의 내용에 대해서 간단히 알아보겠습니다.   Index.html 파일을 열면 부트스트랩의 간단한 소개와 하단에 이...

워드프레스 – Font Awesome 폰트 아이콘 사용하기”에 대한 1개의 생각

댓글 남기기