대부분의 테마에서 사용 가능함을 언급하는 Font Awesome .
탬플릿을 열어서 코드에 직접 <i>태그를 넣어야 하는 방법 외에, 페이지 내의 각 요소의 css 선택자를 이용하여 앞이나 뒤에 아이콘을 추가하는 방법이 있습니다.

먼저, 아이콘을 표시하기 위해 테마가 스타일을 준비해 뒀는지를 확인해야 합니다.
사이트의 해드(<head></head>) 태그 내에 font-awesome의 스타일시트가 링크 돼 있는지 체크합니다.

 

스타일이 연결이 되어 있어서 아이콘을 사용 가능한 것을 확인했으면, 다음으로 추가할 요소의 css 선택자를 확인합니다.

ex) 블로그 글 리스트 타이틀 앞에 아이콘을 추가하려고 함

 

선택자로 .blog-entry-details h2 를 쓰면 될 듯합니다.

이제 테마에 아래와 같은 스타일 정의를 추가하면 폰트 아이콘 표시 끝.

font-awesome 의 아이콘 번호를 확인할 수 있는 리스트  > 보기

 

만약, 헤더 네비게이션에 아이콘을 추가하고 싶을 땐?

어드민 > 외모 > 메뉴 , 추가하고자 하는 메뉴의 ‘css 클래스’ 에 스타일 추가를 위한 클래스를 입력합니다.

네비게이션에 클래스가 추가가 됐는지 확인합니다.

 

이제 위 방법을 응용해서 폰트 스타일을 추가하면 메뉴에 아이콘 표시도 끝.
스타일 정의 시 이제 선택자가 .font-icon-abcde a 가 되면 됩니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.