워드프레스 아바다 테마에서 아이콘이 깨져 보이는 경우 (FontAwesome 아이콘 깨짐 현상)

워드프레스 아바다 테마에서 FontAwesome 아이콘이 깨져 제대로 표시되지 않는 경우가 간혹 있습니다. 그런 경우 아래의 방법으로 문제 해결을 시도할 수 있습니다. 다른 워드프레스 테마에서 FontAwesome 아이콘 깨짐 현상이 발생할 경우에도 아래의 방법을 시도해볼 수 있습니다.

[ 이 글은 2017년도에 작성되었지만 내용을 최신 버전에 맞게 완전히 수정하여 재발행되었습니다. ]

워드프레스 아바다 테마에서 FontAwesome 아이콘이나 커스텀 아이콘 깨짐 문제 해결 방법

테마를 업데이트하거나 이전한 후에 폰트 아이콘이 깨져보이는 경우가 있습니다. 이 경우 아래의 조치를 취해 보시기 바랍니다.

다른 도메인에서 호스트되는 글꼴

모든 브라우저에서는 폰트가 동일한 도메인에서 호스팅되도록 요구합니다. 서브도메인도 다른 도메인으로 간주됩니다. Font Awesome 아이콘이나 커스텀 폰트가 특정 브라우저(주로 파이어폭스나 IE)에서 깨져 표시되면 두 가지 솔루션으로 이 문제를 해결할 수 있습니다.

1. 웹사이트가 액세스되는 도메인과 동일한 도메인에서 폰트를 호스트합니다.

2. 폰트가 호스트되는 동일한 도메인의 루트 폴더에 있는 .htaccess 파일에 다음 코드를 추가합니다.

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
 Header set Access-Control-Allow-Origin "*"
</FilesMatch>

워드프레스에서 .htaccess 파일을 수정하려면 FTP에 접속하거나 파일 관리자(블루호스트나 사이트그라운드를 이용하는 경우)를 이용해야 합니다. "워드프레스에서 wp-config.php / htaccess 파일 수정하기"를 참고해보세요.

Fusion 캐시 삭제

위의 조치로 문제가 해결되지 않으면 캐시를 지워주면 문제가 해결될 수 있습니다. 브라우저 캐시와 W3 Total Cache나 WP Super Cache 등 캐시 플러그인의 캐시 이외에도 Fusion Cache를 초기화해야 합니다.

Fusion Cache를 초기화(리셋)하려면 워드프레스 관리자 페이지의 왼쪽 패널에서 Avada > 테마 옵션 > Performance로 이동합니다.

위와 같은 화면이 표시되는데요, 그러면 "Reset Fusion Caches" 아래의 "Reset Fusion Caches" 아이콘을 클릭합니다.

퓨전 캐시(Fusion Caches)를 초기화하면 아이콘 엑박 현상이나 이상 현상이 해결될 수 있습니다.

Font Awesome v4 호환성 활성화

경우에 따라 Font Awesome 버전 4 호환성을 활성화하면 아이콘 깨짐 문제가 해결되는 경우가 있습니다. Avada > 테마 옵션 > 고급 > Theme Features로 이동하여 Font Awesome v4 Compatibility를 On으로 설정하고 저장한 후에 문제가 해결되는지 체크해보시기 바랍니다.

다른 테마에서 폰트어썸 아이콘이 깨지는 경우에도 테마 옵션에서 이와 비슷한 옵션을 제공하면 호환성 옵션을 활성화/비활성화하여 문제가 해결되는지 체크해볼 수 있습니다.

HTTP 주소로 로드 시 FontAwesome 아이콘 깨짐 현상

SSL 인증서를 설치하고 사이트 주소와 워드프레스 주소를 https 주소로 변경한 경우 http 주소로 접속하면 아이콘이 깨질 수 있습니다. 이 경우 http 주소로 유입되는 트래픽을 https 주소로 리디렉션시켜주면 문제가 해결됩니다. .htaccess 파일에 다음 코드를 넣으면 http 주소를 https 주소로 리디렉션됩니다(참고).

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

최신 버전으로 업데이트

테마를 최신 버전으로 업데이트하면 문제가 해결되는 경우가 있습니다. 백업을 받아놓고 테마와 워드프레스, 플러그인을 모두 최신 버전으로 업데이트하여 문제가 발생하는지 체크해보세요.

테마 판매자에게 고객 지원 요청

만약 위와 같은 조치에도 문제가 해결되지 않으면 테마 판매자에게 지원을 요청할 수 있습니다. 아바다 테마의 경우 지원을 받으려면 유효한 지원 라이선스가 있어야 합니다.

참고로 Avada를 비롯한 모든 테마포레스트 테마는 기본적으로 6개월의 지원이 제공되고, 이후에는 지원을 별도로 구매/갱신해야 지원을 받을 수 있습니다. 지원이 만료되더라도 파일 업데이트는 해당 테마가 업데이트를 제공하는 동안 계속 받을 수 있습니다. (Divi 테마의 경우 라이선스에 따라 1년 또는 평생 지원과 업데이트를 제공받을 수 있습니다.)

참고

• 워드프레스에 파비콘 추가하기 (브라우저 탭에 표시되는 아이콘)