[WordPress] 워드프레스에서 대시콘(Dashicons) 사용하기

Summary

  1. 워드프레스 대시보드에서 사용되는 대시콘을 테마 개발에서도 사용할 수 있음
  2. functions.php 파일을 조금만 개조하고
  3. 대시콘 홈페이지에서 원하는 대시콘을 가져다 쓰면 됨

지난 번에 워드프레스에서 제네리콘을 사용 할 수 있도록 세팅 하는 방법을 포스팅 했었는데요. 사실상 이제 제네리콘은 제네리콘뉴로 대체되어 구 제네리콘은 더이상 안내 페이지 조차도 없습니다.

그래서 오늘은 제네리콘의 대체재로 사용 할만한, 대시콘(Dashicons)을 워드프레스에서 사용 할 수 있도록 하는 방법을 기록해봅니다.

원래는 백엔드용인 대시콘을 프론트엔드로

대시콘은 원래 백엔드(Back-end)용입니다. 이게 무슨 말이냐면, 워드프레스로 방문한 방문자들이 보는 화면(Front-end)이 아닌 워드프레스로 구성된 블로그의 관리자가 보는 화면(대시보드와 같은)에서 사용하기 위한 폰트 아이콘이라는 것입니다.

지금 부터 우리가 할 일은 이 백엔드용 대시콘을 프론트엔드에서도 사용할 수 있도록 개조하는 것입니다.

대시콘 사용을 위한 테마의 functions.php 파일 개조

대시콘을 프론트엔드에서도 사용할 수 있도록 하는 방법은 아주 간단합니다. 이전에 소개해 드렸던 제네리콘 사용 등록과 같은 방식으로 아래 코드를 functions.php 파일에 추가해 줍니다.

function corestone_scripts() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'corestone_scripts' );

이렇게 직접 functions.php 파일을 개조 하는 방법 이외에도, 대시콘을 프론트엔드에서 사용할 수 있도록 하는 많은 플러그인들이 있으니, 테마 파일 개조가 부담스러운 분들은 플러그인을 적극 활용하면 됩니다.

대시콘 실제 사용방법

대시콘을 실제로 사용하는 방법을 알아 봅시다. 먼저 대시콘 소개 페이지에서 원하는 아이콘을 찾아 클릭해봅니다.

Dashicon – \f345

위 아이콘(\f345)을 사용하기 위해 할일은 두가지 입니다.

  1. 특정 요소의 :before 선택자에 font-familydashicons 로 설정하기
  2. 해당 :before 선택자의 content\f345 로 설정하기

위 화면에서 Copy CSS 버튼을 누르면 나오는 코드는 2번에 해당하는 코드이며, Copy HTML 을 누르면 나오는 코드는 이미 지정된 class 를 사용해 1번과 2번을 동시에 처리하는 방식입니다.


대시콘은 워드프레스 블로그의 백엔드에서 계속 사용될 것이기 때문에, 지원 중단과 같은 걱정은 하지 않아도 될 것 같습니다. 이 대시콘을 프론트엔드로 꺼내어 적극적으로 활용해 봅시다.