요소 아이콘을 수정하는 방법로드되지 않음 (입증 된 가이드)

게시 됨: 2025-06-19

Elementor는 WordPress의 가장 인기있는 페이지 빌더 중 하나입니다. 코딩없이 아름다운 웹 사이트를 디자인 할 수 있습니다. 유용한 기능 중 하나는 아이콘 라이브러리입니다. 사이트의 버튼, 메뉴, 제목 등에 쉽게 추가 할 수있는 많은 무료 및 프리미엄 아이콘에 액세스 할 수 있습니다.

이 아이콘은 사이트를 현대적이고 전문적으로 보이게하는 데 도움이됩니다. 그들은 UX 디자인을 개선하고 사용자를 안내하며 중요한 콘텐츠를 강조 할 수 있습니다. 따라서 웹 사이트를보다 사용자 친화적이고 탐색하기 쉽고 방문자의 관심을보다 효과적으로 얻을 수 있습니다.

그러나 때로는 백엔드 편집기에 표시되지만 요소 아이콘은 프론트 엔드에 제대로로드되지 않습니다. 예를 들어 아래 이미지를보십시오. 요소 캔버스에 아이콘이 표시되는 것을 볼 수 있습니다.

Icons are displayed on the Elementor Canvas

오류 : 페이지의 프론트 엔드를 방문 할 때 아이콘이 표시되지 않음을 알 수 있습니다. 당신의 끝에 비어 있거나 부러 질 수 있습니다.

Icons aren't displayed on the frontend

이것은 실망스럽고 웹 사이트를 불완전하게 보이게 할 수 있습니다. 따라서이 기사에서는 요소 아이콘로드 문제를 해결하는 방법에 대한 단계별 안내서를 다룹니다. 시작하세요!

요소 아이콘이 프론트 엔드에로드되지 않는 이유

Elementor Icons가 귀하의 웹 사이트의 프론트 엔드에로드하지 않을 수있는 여러 가지 이유가 있습니다. 일단 잘 알고 나면 문제를 해결하기가 쉽습니다. 아래에서 확인하십시오.

Why Elementor Icons May Not Load on the Frontend
  • 요소의 불완전한 설정

요소는 글꼴 멋진 아이콘을 수동으로 또는 자동으로로드하는 옵션을 제공합니다. 요소> 설정> 고급 아래에서 이러한 설정이 제대로 구성되지 않으면 아이콘 라이브러리가로드되지 않을 수 있습니다. 또한 프론트 엔드에서 아이콘로드를 비활성화 할 수 있습니다.

  • 글꼴 멋진 파일이 누락되었습니다

요소 아이콘은 인기있는 아이콘 툴킷 인 Font Awesome에 따라 다릅니다. 파일 경로 나 서버 문제가 잘못되어 필요한 글꼴 멋진 파일이로드되지 않으면 아이콘이 표시되지 않습니다. 업데이트가 잘못된 업데이트, 파일 권한 오류 또는 오해 된 호스팅 환경 후에 발생할 수 있습니다.

  • 캐싱 문제

캐싱 플러그인 또는 브라우저는 사이트 페이지 및 리소스의 이전 버전을 저장할 수 있습니다. 캐시 된 버전에 최신 아이콘 파일 또는 스크립트가 포함되어 있지 않으면 프론트 엔드에 아이콘이 올바르게 나타나지 않을 수 있습니다. 모든 캐시 (브라우저, 플러그인 및 서버 측)을 지우면 문제가 해결 될 수 있습니다.

  • 나쁜 cdn

CDN (Content Delivery Networks)은 인근 서버의 파일을 제공하여 사이트 컨텐츠를 더 빨리로드하는 데 도움이됩니다. 그러나 CDN이 아이콘 파일을 제대로 제공하거나 업데이트하지 않으면 요소 아이콘이 나타나지 않을 수 있습니다. 잘못된 CDN 설정 또는 동기화의 지연으로 인해 아이콘이로드되지 않도록 차단할 수 있습니다.

  • 느리거나 불안정한 인터넷 연결

인터넷이 충분히 빠르지 않으면 요소 아이콘이 완전히로드되지 않을 수 있습니다. 때로는 네트워크 문제로 인한 부분 파일로드가 프론트 엔드에서 예상대로 아이콘이 나타나는 것을 막을 수 있습니다.

참고 : 따라서 위의 식별 된 문제 중에서 Elementor의 불완전한 설정 , Font Awesome 파일이 누락되었으며 캐싱 문제가 제어중인 문제입니다. 올바른 단계를 수행하여 이러한 문제를 해결할 수 있습니다.

웹 사이트에 문제를로드하지 않는 Elementor 편집기 문제를 해결하는 방법에 대한이 게시물을 확인하십시오.

요소 아이콘을 수정하는 방법로드되지 않음 - 설정 구성

이제이 섹션에서는 위의 섹션의 메모에 언급 된 문제를 처리하여 요소 아이콘을로드하지 않는 요소 아이콘을 수정하는 방법을 보여줍니다. 계속 읽으십시오.

솔루션 1 : 불완전한 설정 구성

먼저 웹 사이트의 백엔드 대시 보드로 이동하십시오. 요소> 설정> 고급 으로 이동하십시오.

Elementor Advanced Settings

페이지를 조금 아래로 스크롤하면 Google Fonts 옵션이 있습니다. 드롭 다운 옵션에서 활성화하십시오 .

Enable Google Fonts

같은 방식으로 로드 글꼴 Awesome 4 지원 옵션을 찾아 예를 선택하십시오.

Enable Load Font Awesome

모든 변경 사항이 완료되면 변경 사항 저장 버튼을 클릭하십시오.

Save the changes

이제 프론트 엔드로 와서 페이지를 다시로드하십시오. 아이콘이 완벽하게 나타나는 것을 볼 수 있습니다.

Check icons on the frontend again

따라서이 첫 번째 솔루션은 요소의 불완전한 설정누락 된 글꼴 파일 문제를 모두 해결합니다.

해결책 2 : 캐시를 지우십시오

프론트 엔드에서 여전히 아이콘을 볼 수 없다면 캐싱 문제가있을 수 있습니다.

웹 사이트의 캐시를 지우는 방법에는 여러 가지가 있습니다. 오늘날 대부분의 호스팅 회사는 캐싱 옵션을 제공합니다. 예를 들어, Hostinger를 사용하는 경우 웹 사이트로 이동하여 웹 사이트를 선택하십시오. CLEAR CACHE 옵션이 표시됩니다.

버튼을 클릭 하면 웹 사이트에서 캐시를 지울 수 있습니다.

Clear cache from Hosting

웹 사이트에 명확한 캐싱 옵션이 없으면 걱정할 필요가 없습니다. 이 옵션도 제공하는 많은 플러그인이 있습니다. 예를 들어, WP 로켓은 가장 유명하고 인기있는 것 중 하나입니다.

사이트에 WP 로켓 플러그인이 설치되어 있다고 가정 해 봅시다. 플러그인 대시 보드로 이동하십시오. 명확하고 예압 옵션이 표시됩니다. 버튼을 클릭 하면 사이트에서 캐시를 지울 수 있습니다.

Clear cache to load your Elementor Icons

WP Rocket은 프리미엄 전용 플러그인입니다. 그러나 다른 많은 캐싱 플러그인은 무료 및 프리미엄 버전을 모두 제공합니다. 최고의 WordPress 캐싱 플러그인 인이 게시물에서 얻을 수 있습니다.

솔루션 3 : 요소 및 종속 플러그인을 업데이트하십시오

기존 버전에 버그가있을 수 있으므로 요소 및 관련 플러그인을 업데이트하지 않으면이 문제가 발생할 수 있습니다. 따라서 위에서 언급 한 접근 방식을 완료 한 후에도 문제가 해결되지 않으면

플러그인 페이지 로 이동하여 아래에 업데이트가 있는지 확인하십시오. 알림이 표시되면 버튼을 클릭하여 플러그인을 업데이트하십시오.

그런 다음 웹 페이지를 다시로드하십시오. 이것이 당신의 문제를 해결하기를 바랍니다.

Update Elementor Plugin

해결책 4 : 더 나은 인터넷과 CDN을 사용하십시오

여전히이 문제로 고통받는 경우 인터넷이나 사용중인 CDN에 문제가있을 수 있습니다. 당신이 가능한 모든 기술 작업을 수행했기 때문입니다. 따라서 나머지 문제가 귀하의 CDN 또는 인터넷 서비스에있을 수 있다고 가정 할 수 있습니다.

인터넷 속도를 확인할 수있는 온라인 도구 (Fast.com)가 많이 있습니다. 또한 호스팅 또는 CDN 서비스 제공 업체에 대해 토론하십시오. 그들이 당신을 위해 대답을하기를 바랍니다.

따라서 WordPress의로드 문제가없는 요소 아이콘을 해결할 수 있습니다.

보너스 포인트 : Elementor 라이브러리로 무료 아이콘을 가져 오기 위해 추가 플러그인을 사용하십시오.

기본적으로 Elementor는 글꼴 멋진 아이콘을 사용합니다. 그러나이 아이콘이 충분하지 않고 더 많은 옵션이 필요하다고 느끼면 새로운 아이콘 배치를 라이브러리에 업로드 할 수 있습니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

그러나 우리는 단순히 플러그인을 설치하여 라이브러리에 새로운 아이콘 모음을 추가하는 쉬운 방법을 알고 있습니다. 우리는이 섹션 에서이 과정에 대해 논의 할 것입니다.

Elementor Icon Library

플러그인을 설치하십시오

새 플러그인 추가 옵션으로 이동하십시오. 플러그인 아이콘 요소 - Elementor Page Builder Icon Pack (6718 아이콘)을 설치하고 활성화합니다.

Install the Icon Element plugin

이제 캔버스로 가서 아이콘 라이브러리를 열십시오. 기본 옵션 아래의 왼쪽에 새로운 배치가 추가되었습니다.

클릭하고 함께 제공되는 아이콘을 탐색 할 수 있습니다.

New icon batches added to the Elementor Library

이 무료 플러그인을 사용하면 웹 사이트에서 수천 개의 유용한 아이콘을 잠금 해제하고 사용할 수 있습니다.

요소 아이콘에 대한 자주 묻는 질문

튜토리얼을 즐겼기를 바랍니다. 이제이 섹션에서는 오늘의 주제와 관련된 가장 자주 묻는 질문을 나열하고 답변합니다.

내 요소 아이콘이 라이브 사이트에 표시되지 않는 이유는 무엇입니까?

플러그인/테마 충돌, 글꼴 멋진 파일 누락, 캐싱 문제 또는 잘못된 요소 설정과 같은 몇 가지 이유로 인해 아이콘이 표시되지 않을 수 있습니다. 이러한 문제는 프론트 엔드에서 아이콘 파일이 제대로로드되는 것을 중지합니다.

아이콘이 작동하려면 Elementor의 특별한 설정을 활성화해야합니까?

예. Elementor의 설정에서 글꼴 멋진 로딩 옵션이 활성화되어 있는지 확인하십시오. 또한 호환성 문제를 피하기 위해 최신 버전의 Elementor로 업데이트하십시오.

아이콘 문제를 해결하지 않으면 어떻게해야합니까?

기본 WordPress 테마 (예 : 204 등)로 전환하고 요소를 제외한 모든 플러그인을 비활성화하십시오. 그런 다음 아이콘이로드되는지 확인하십시오. 그들이하는 경우 플러그인 중 하나 또는 테마가 문제를 일으키고 있습니다.

닫는!

로드 문제가 아닌 요소 아이콘을 고치는 것은 처음에는 어려운 것처럼 보일 수 있지만 올바른 단계를 사용하면 쉽게 해결할 수 있습니다. 항상 요소의 기본 설정을 확인하여 시작하여 글꼴 굉장한 기능이 활성화되어 있는지 확인하십시오. 이전 캐시 파일이 업데이트 된 자원을 차단하므로 변경 후 모든 유형의 캐시를 지우십시오.

또한 예상치 못한 버그 및 호환성 문제를 피하기 위해 요소 및 기타 모든 플러그인을 정기적으로 업데이트하십시오. 향후이 문제를 방지하려면 요소와 충돌 할 수있는 너무 많은 플러그인을 사용하지 마십시오. 요소를 완전히 지원하는 잘 알려진 테마를 사용하십시오. Nulled 플러그인을 피하십시오.

CDN을 사용하는 경우 CDN을 올바르게 구성하고 동기화해야합니다. 마지막으로, 다른 브라우저와 장치에서 사이트를 테스트하여 모든 방문자에게 아이콘이 원활하게로드되도록하십시오. 이 간단한 습관은 사이트를 항상 완벽하게 유지하는 데 도움이 될 수 있습니다.