워드프레스에서 FontAwesome 아이콘을 이미지로 바꾸는 방법

워드프레스에서 FontAwesome 아이콘을 이미지로 바꾸는 방법 3

최근 아바다 테마로 만든 워드프레스 사이트를 다른 웹호스팅 서버로 이전한 후에 FontAwesome 아이콘이 제대로 표시되지 않은 문제가 발생했습니다.

저는 아바다에서 제시한 방법으로 잘 되지 않아서 약간의 삽질을 통해 겨우 해결할 수 있었습니다. (캐시 플러그인과 Minify 플러그인을 비활성화하면 문제가 해결될 수도 있을 것입니다.)

다른 방법으로 폰트어썸 아이콘을 다른 이미지 아이콘으로 대체하는 방법도 생각해볼 수 있습니다.

가령, 대체할 이미지를 워드프레스 관리자 페이지 > 미디어에 업로드한 후에 업로드한 이미지의 URL을 복사하도록 합니다.

그런 다음 구글 크롬에서 요소 검사를 하여 바꾸려고 하는 폰트어썸의 CSS 코드를 확인합니다. 보통 다음과 같은 형식입니다.

.fa-search:before {
content: "\f002";
}

위의 코드는 FontAwesome의 검색 아이콘을 나타냅니다. FontAwesome 아이콘의 CSS 코드를 확인했다면 다음과 같은 형식으로 FontAwesome 아이콘을 이미지로 대체합니다.

.fa-search:before {
content: url("http://www.your-domain.com/wp-content/uploads/2017/12/icons_search.gif") !important;
}

이미지의 URL은 적절히 변경하도록 합니다.

위의 코드는 차일드 테마(자식 테마; 하위 테마)가 설치된 경우 차일드 테마 내의 스타일시트 파일(style.css)에 추가하면 됩니다. 그렇지 않은 경우 외모 > 사용자 정의하기 > 추가 CSS에 추가할 수도 있습니다.

참고로 FontAwesome은 사이트 속도를 느리게 할 수 있다고 하네요. FontAwesome을 사용하지 않으면 비활성해도 좋을 듯 합니다. 아바다에서는 Theme Options에서 FontAwesome으로 검색한 후에 FontAwesome을 비활성화(Turn Off)할 수 있습니다.

워드프레스에서 FontAwesome 아이콘을 이미지로 바꾸는 방법 4

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.