본문 바로가기

웹개발/워드프레스

워드프레스에 Font Awesome으로 인포그래픽 아이콘 넣기

안녕하세요! Jinnovator입니다.

오늘은 워드프레스에 Font Awesome을 적용시키고 활용하는 방법에 대해 알아보겠습니다.

 아래 버튼에 들어간 아이콘은 어떻게 넣었을까요?

Font Awesome은 아이콘은 "폰트"로 쓸 수 있는 것입니다. 이미지로 넣어도 되는데 왜 꼭 폰트를 사용해야 하는가에 대해 의구심을 품는 분들이 계실 것입니다.

폰트의 장점이라면?

1. 색깔, 크기를 글씨와 함께 마음대로 지정할 수 있습니다.

2. 별도의 이미지 파일이 필요 없습니다.

3. 벡터이기 때문에 확대를 해도 아이콘이 깨지지 않습니다.

 

 

이 Font Awesome은 워드프레스 뿐 아니라, 모든 웹사이트에 적용 가능합니다.

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

<Font Awesome 웹사이트>

 

현재 2015년 2월 11일 기준으로 4.3.0 버전 까지 나와있습니다. 하지만 인터넷 익스플로러 7 버전이 지원되지 않습니다.

우리 나라에서는 인터넷 익스플로러 사용율이 높기 때문에, 이 버전의 지원을 무시할 수 없죠? 그래서 IE7 지원이 가능한 3.2.1 버전을 다운로드하도록 하겠습니다.

먼저, 메인 화면의 Old 3.2.1 Docs를 클릭합니다.

빨간색 배경의 메인 화면이 뜨는군요.  

일반적인 웹사이트의 경우, 상단의 "Get Started" 메뉴를 클릭하여 css를 삽입하시면 됩니다.

CDN을 이용하여 해당 css 파일을 외부에서 불러올 수도 있고, 다운로드하여 직접 링크를 거실 수 있겠죠.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

 

워드프레스의 경우, 아래의 코드 사용하여 등록해 주세요.

아래와 enqueue_scripts 함수를 wp_enqueue_scripts에 action으로 추가합니다.

CDN을 이용하시려면 yourpath/...css 부분에 위의 주소를 넣으시면 되겠죠?

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

function enqueue_scripts() {
 global $is_IE;
  if ( $is_IE ) {
   wp_register_style( 'font-awesome-ie7', yourpath/font-awesome-ie7.min.css' );
    $GLOBALS['wp_styles']->add_data( 'font-awesome-ie7', 'conditional', 'lte IE 7' );
   wp_enqueue_style( 'font-awesome-ie7' );
  }
  wp_register_style( 'font-awesome-3.2', 'yourpath/font-awesome.min.css'  );
  wp_enqueue_style( 'font-awesome-3.2' );
}

 

 보시는 바와 같이 다양한 아이콘을 "폰트"로서 사용할 수 있습니다.  아래 보이는 아이콘 뿐 아니라, 수백가지의 다양한 아이콘을 사용할 수 있어요.

 

아이콘을 넣는 방법은 간단합니다.

<i class="icon-camera-retro"></i> 카메라

위와 같이 i 태그에 클래스명만 바꾸어서 넣어 주시면 됩니다.

잠깐, 앞에서 버튼에 아이콘을 넣었는데.. 어떻게 넣었을까요?

일반적으로 사용하는 <input> 태그의 버튼에는 넣을 수 없습니다.

 

<a href="" class="button"><i class="icon-camera-retro"></i> 버튼</a>

<button type="button"><i class="icon-camera-retro"></i> 버튼</button>

 

와 같은 식으로 넣으시면 버튼에 아이콘이 표시됩니다.

 

감사합니다!