Elementor 아이콘이 표시되지 않을 때 해결 방법: 5가지 쉬운 팁

Elementor 아이콘이 사라지는 데에는 여러 가지 이유가 있습니다. CSS 파일 누락, 오래된 플러그인 데이터, 캐싱 충돌, HTTPS 불일치, 서버 제한 등이 미국을 비롯한 전 세계 WordPress 사이트에서 가장 흔한 원인입니다.

이 가이드에서는 모든 원인과 각 원인에 대한 정확한 해결 방법을 다루므로 추측 없이 아이콘을 복원할 수 있습니다.

Elementor의 아이콘 박스란 무엇인가요?

아이콘 박스는 Elementor 위젯입니다. 페이지에서 기능, 서비스 또는 주요 정보를 강조하는 데 사용할 수 있습니다. Font Awesome, Material Design 및 사용자 지정 아이콘 라이브러리를 지원하며, 코드를 수정하지 않고 Elementor 편집기에서 직접 크기, 색상 및 위치를 조정할 수 있습니다.

아이콘 박스로 할 수 있는 일은 다음과 같습니다

• 원하는 아이콘을 선택하세요: Font Awesome이나 Material Design에서 제공하는 아이콘이 마음에 들든, 아니면 직접 만든 독창적인 아이콘이 있든, 선택은 자유입니다.

• 나만의 스타일로 꾸며보세요: 아이콘을 좀 더 크게 만들고 싶으신가요? 색상을 바꾸고 싶으신가요? 문제없습니다. 크기를 조절하고, 색조를 변경하고, 모양을 다양하게 연출해 볼 수 있습니다. 제목과 설명도 직접 작성할 수 있습니다.

• 드래그 앤 드롭, 끝! 기술적인 지식이 없어도 사용 가능합니다. 아이콘 박스 위젯을 페이지나 게시물의 원하는 위치로 드래그하기만 하면 바로 사용할 수 있습니다.

Elementor에서 아이콘 사용에 어려움을 겪고 계신가요? 도움이 될 체크리스트를 확인해 보세요

아이콘이 보이지 않는 경우, 고급 해결 방법을 시도하기 전에 다음 간단한 체크리스트를 따라 오류를 파악하고 아이콘을 복원하세요.

• Elementor 업데이트: 스마트폰 앱을 업데이트하는 것처럼 소프트웨어도 때때로 최신 버전으로 업데이트해야 합니다. Elementor를 최신 버전으로 유지하세요.

• 아이콘 라이브러리를 확인하세요. Elementor를 실행한 다음 설정, 고급으로 이동하여 Font Awesome 옵션이 활성화되어 있는지 확인하십시오. 이 옵션이 비활성화되어 있으면 다른 설정과 관계없이 아이콘이 표시되지 않습니다.

• 플러그인 또는 테마 충돌 테스트: 다른 플러그인을 일시적으로 비활성화하고 Twenty Twenty-Four와 같은 기본 WordPress 테마로 전환하세요. 아이콘이 다시 나타나면 플러그인을 하나씩 다시 활성화하여 충돌 원인을 찾으세요.

• 캐시 모두 지우기: 브라우저 캐시와 캐싱 플러그인 캐시를 모두 지우세요. 또한 Elementor > 도구 > 파일 및 데이터 재생성에서 Elementor 파일을 재생성하여 최신 에셋이 로드되도록 하세요.

• 다른 브라우저에서 테스트해 보세요. 브라우저마다 글꼴 로딩 방식이 다릅니다. Chrome, Firefox, Safari에서 페이지를 테스트하여 문제가 특정 브라우저에만 발생하는지 아니면 사이트 전체에 걸쳐 발생하는지 확인하세요.

• CDN 설정을 확인하세요: CDN을 사용하는 경우 Elementor 아이콘이 필요로 하는 글꼴 파일을 CDN이 차단하고 있을 수 있습니다. CDN을 일시적으로 비활성화하고 아이콘이 제대로 로드되는지 테스트해 보세요. 아이콘이 정상적으로 로드된다면 CDN 제공업체에 문의하여 필요한 글꼴 파일 형식을 허용 목록에 추가해 달라고 요청하세요.

Elementor 아이콘이 표시되지 않는 문제를 해결하는 방법

Elementor의 사용자 지정 아이콘이 웹사이트에서 숨바꼭질을 하듯 사라질 때면 당황스러울 수 있습니다.

Elementor 아이콘 관련 문제는 대부분 다음 두 가지 원인 중 하나로 발생합니다. 플러그인에 최근 변경 사항이 생겨 아이콘 로드 방식에 영향을 주거나, 라이브러리에서 아이콘이 완전히 누락된 경우입니다. 아래 해결 방법은 두 가지 문제를 모두 해결합니다.

• Elementor 플러그인 수정 사항: 최근 변경, 업데이트 또는 사용자 정의로 인해 아이콘이 올바르게 표시되지 않을 수 있습니다. 이는 충돌 또는 호환되지 않는 설정 때문일 수 있습니다.

• 라이브러리에서 아이콘이 누락됨: 간혹 라이브러리 아이콘이 누락되거나 로드되지 않아 레이아웃에서 사라질 수 있습니다.

이제 문제의 원인을 파악했으니, 아이콘을 다시 주목받게 하는 해결 방법을 살펴보겠습니다.

문제 1: Elementor 플러그인 변경 사항

최근에 Elementor 플러그인을 업데이트했거나 새로 설치했을 수 있으며, 그로 인해 일부 Font Awesome 아이콘이 표시되지 않을 수 있습니다.

다음과 같은 일을 할 수 있습니다

• 워드프레스 대시보드로 이동하세요.
• 사이드바에서 "Elementor"를 선택한 다음 "설정"을 선택하세요
• "고급" 탭을 클릭하세요.
• "Font Awesome 4 지원 로드" 옵션을 찾아 활성화하거나 활성화되어 있는지 확인하십시오.

문제 2: 오래된 Elementor CSS 및 데이터 파일

Elementor 아이콘이 로드되지 않는 경우는 생성된 CSS 파일이 오래되었거나 손상되었기 때문일 수 있습니다. 이 경우 아이콘 글꼴 스타일이 제대로 로드되지 않아 페이지에서 아이콘이 비어 있거나 보이지 않을 수 있습니다.

다행히 Elementor는 이 문제를 빠르게 해결할 수 있는 방법을 제공합니다. 다음 단계를 따라 파일을 다시 생성하세요

• WordPress 관리자 화면에 로그인하고 Elementor를.
• 메뉴에서 도구를 클릭하세요
• 일반 탭 에서 파일 및 데이터 재생성을 선택합니다 .
• 버튼을 클릭하고 Elementor가 데이터를 새로 고치도록 하세요.

이 과정은 데이터베이스에 저장된 CSS 파일을 다시 빌드하고 아이콘 표시에 사용되는 리소스를 업데이트합니다. 이 단계를 완료한 후 페이지를 새로고침하고 아이콘이 표시되는지 확인하세요.

많은 경우, 이 간단한 해결 방법으로 추가적인 문제 해결 없이 오류가 해결됩니다.

문제 3: 혼합 콘텐츠 또는 HTTPS 구성 문제

아이콘이 표시되지 않는 또 다른 일반적인 이유는 혼합 콘텐츠 문제입니다. 이는 웹사이트가 HTTPS를일부 아이콘 파일이나 글꼴 리소스는 여전히 HTTP를 통해 요청될 때 발생합니다.

최신 브라우저는 보안상의 이유로 이러한 요청을 차단하므로 아이콘이 로드되지 않습니다.

먼저 일반 설정에서 WordPress 주소와 사이트 주소가 모두 올바른 HTTPS URL을 사용하고 있는지 확인하세요. 주소가 일치하지 않으면 설정을 수정하고 변경 사항을 저장하세요.

브라우저 개발자 도구를 사용하여 페이지를 검사하면 차단된 리소스를 찾을 수 있습니다. 아이콘 파일이 차단된 경우 데이터베이스 또는 플러그인 설정에서 URL을 업데이트하세요.

모든 리소스가 HTTPS를 통해 로드되면 아이콘이 다시 표시될 것입니다.

문제 4: 파일 권한 또는 서버 구성 문제

경우에 따라 호스팅 또는 서버 구성 문제로 인해 오류가 발생할 수 있습니다. Elementor 아이콘은 WOFF 및 TTF와 같은 글꼴 파일을 사용합니다. 서버에서 이러한 파일 형식을 차단하거나 파일 권한이 올바르지 않으면 아이콘이 제대로 로드되지 않을 수 있습니다.

이 문제를 해결하려면 WordPress 설치 환경, 특히 Elementor 리소스가 저장된 폴더의 파일 권한을 확인하세요. 서버가 해당 파일에 접근할 수 있도록 권한이 설정되어 있어야 합니다.

호스팅 제공업체에 문의하여 글꼴 파일이 보안 규칙에 의해 제한되지 않았는지 확인할 수도 있습니다. 일부 서버는 기본적으로 특정 리소스를 차단하므로 아이콘이 비어 있는 것처럼 보일 수 있습니다.

서버에서 필요한 파일에 대한 접근을 허용하면 Elementor 아이콘이 웹사이트 메뉴와 페이지 전체에 정상적으로 로드될 것입니다.

5호: 라이브러리에서 아이콘이 사라짐

Elementor 아이콘 라이브러리의 아이콘이 사라지는 경우가 있는데, 특히 "Nucleo Mini" 아이콘을 사용하는 템플릿에서 이러한 현상이 자주 발생합니다.

이 문제를 확인하고 해결하는 방법은 다음과 같습니다

• 아이콘이 표시될 페이지를 방문하세요.
• Elementor 편집기를 실행하려면 "Elementor로 편집" 버튼을 클릭하세요.
• 그다음 미디어 라이브러리를 여세요. 그러면 찾고 있는 아이콘이 라이브러리에 있는지 확인할 수 있습니다.
• 원하는 아이콘이 보이지 않으면 Kava Extra 플러그인을 최신 버전으로 업데이트하여 문제를 해결하세요.

Font Awesome 플러그인 대체 ​​프로그램

위의 해결 방법으로 아이콘이 복구되지 않으면 Font Awesome 플러그인을 직접 설치하는 다른 방법을 시도해 볼 수 있습니다.

• WordPress 관리자 패널에서 플러그인 → 새 플러그인 추가 → 플러그인 업로드.
• 여기서는 컴퓨터에 다운로드한 Font Awesome 플러그인을 업로드하는 옵션이 제공됩니다.
• “지금 설치” 버튼을 클릭하세요.
• 설치가 완료되면 "플러그인 활성화" 버튼을 클릭하는 것을 잊지 마세요.
• 이제 사이트에서 Font Awesome 플러그인이 활성화되었으며 아이콘이 다시 정상적으로 작동할 것입니다.

중요한 변경이나 업데이트를 하기 전에 항상 사이트를 백업하세요. 예상치 못한 문제가 발생하더라도 백업 파일을 통해 복구할 수 있습니다.

결론: Elementor 아이콘 문제를 해결하고 제대로 작동하도록 유지하세요

Elementor 아이콘이 누락되는 경우는 거의 대부분 다음 다섯 가지 원인 중 하나에서 비롯됩니다. 오래된 플러그인 설정, 오래된 CSS 파일, HTTPS 충돌, 서버 제한 또는 누락된 라이브러리 아이콘.

제시된 해결 방법을 순서대로 따라하면 대부분의 경우 지원팀에 문의하지 않고 문제를 해결할 수 있습니다. 모든 방법이 실패할 경우, Elementor의 내장 아이콘 로딩 기능과는 별개로 작동하는 안정적인 대안으로 Font Awesome 플러그인을 직접 설치할 수 있습니다.

Elementor 아이콘이 표시되지 않는 문제 해결 관련 FAQ