대부분의 테마에서 사용 가능함을 언급하는 Font Awesome.
탬플릿을 열어서 코드에 직접 <i>태그를 넣어야 하는 방법 외에, 페이지 내의 각 요소의 css 선택자를 이용하여 앞이나 뒤에 아이콘을 추가하는 방법이 있습니다.
먼저, 아이콘을 표시하기 위해 테마가 스타일을 준비해 뒀는지를 확인해야 합니다.
사이트의 해드(<head></head>) 태그 내에 font-awesome의 스타일시트가 링크 돼 있는지 체크합니다.
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
스타일이 연결이 되어 있어서 아이콘을 사용 가능한 것을 확인했으면, 다음으로 추가할 요소의 css 선택자를 확인합니다.
ex) 블로그 글 리스트 타이틀 앞에 아이콘을 추가하려고 함
선택자로 .blog-entry-details h2 를 쓰면 될 듯합니다.
이제 테마에 아래와 같은 스타일 정의를 추가하면 폰트 아이콘 표시 끝.
.blog-entry-details h2::before {
content: "\f105"; /* 원하는 아이콘의 번호로 대체 가능 */
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
/* 아래는 아이콘의 위치를 변경하고 싶을 때 */
.blog-entry-details h2 {
position: relative;
}
.blog-entry-details h2::before {
position: absolute;
left: -25px;
}
font-awesome 의 아이콘 번호를 확인할 수 있는 리스트 > 보기
만약, 헤더 네비게이션에 아이콘을 추가하고 싶을 땐?
어드민 > 외모 > 메뉴 , 추가하고자 하는 메뉴의 ‘css 클래스’ 에 스타일 추가를 위한 클래스를 입력합니다.
네비게이션에 클래스가 추가가 됐는지 확인합니다.
이제 위 방법을 응용해서 폰트 스타일을 추가하면 메뉴에 아이콘 표시도 끝.
스타일 정의 시 이제 선택자가 .font-icon-abcde a 가 되면 됩니다.