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

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

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

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

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

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

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

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

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

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

Dashicon – \f345

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

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

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