FontAwesome 폰트 깨짐 현상 수정
이 블로그의 프런트 페이지를 방문했을 때 FontAwesome 폰트가 깨져서 표시되었을 것입니다.
왜 유독 첫 페이지만 폰트가 깨져서 표시되는지 모르겠습니다. 하지만 로그인했을 때에는 폰트가 멀쩡하게 잘 표시됩니다.
이 블로그에는 Simple Life라는 매우 심플한 테마가 사용되고 있습니다. 이 테마에 FontAwesome이 기본적으로 탑재되어 있네요. (많은 테마에서 FontAwesome이 기본적으로 사용되고 있습니다.)
혹시 FontAwesome이 기본적으로 내장되어 있지만 제대로 표시되지 않는 경우에는 다음 CSS 코드를 스타일시트 파일에 추가하면 문제가 해결될 수도 있을 것입니다.
.fa {
font: FontAwesome !important;
}참고로 인기 워드프레스 테마 중 하나인 Enfold에는 Fontello 아이콘이라는 다소 생소한 폰트가 사용됩니다. Fontello 사용은 다음 동영상을 통해 확인해볼 수 있습니다.
사이트 이전 후 FontAwesome 폰트 깨짐 현상
간혹 사이트 이전 후나 도메인 주소 변경 후에 FontAwesome 폰트나 특수한 아이콘 폰트가 깨진다고 호소하는 분들이 있습니다. 또는, PC에서는 잘 작동하는데 모바일에서는 제대로 작동하지 않는 문제가 발생하기도 합니다.
그런 경우 스타일시트 파일이 제대로 로드되지 않은 것이 원인일 수 있습니다. 스타일시트 파일의 경로나 FontAwesome 폰트의 설치 경로를 확인하여 경로를 수정해주면 문제가 해결될 수 있습니다.