Elementor 에서 사용자 정의 아이콘을 추가하는 방법: 3 가지 방법

주요 시사점

• Elementor의 아이콘 라이브러리 팝업은 기본적으로 일반, 솔리드 및 브랜드 세트의 Font Awesome만 표시하며 아이콘 필드가 있는 모든 위젯은 동일한 팝업을 엽니다.
• Elementor 에서 사용자 정의 아이콘을 추가하는 가장 빠른 방법은 아이콘 필드에 있는 Upload SVG 버튼입니다; 파일이 거부된 경우 Elementor > 설정 > 고급에서 필터링되지 않은 파일 업로드 활성화를 켭니다.
• Elementor Pro 의 사용자 지정 아이콘 화면은 Fontello,IcoMoon 또는 Fontastic.zip 파일에서 전체 아이콘 글꼴을 가져와 아이콘 라이브러리 팝업의 내 라이브러리 아래에 나열합니다.
• Elementor Pro 는 또한 Font Awesome Pro 를 연결합니다: Elementor > 설정 > 통합 아래에 키트 ID 를 붙여넣고 키트 ID 유효성 검사를 클릭하여 Pro 스타일을 선택기에 추가합니다.
• 마스터 애드온 아이콘 라이브러리 확장 기능은 동일한 팝업에 5,344 개의 아이콘이 포함된 8 개의 아이콘 팩을 추가하며, 해당 세트의 깃털 아이콘, 리믹스 아이콘 및 Teenyicons에는 마스터 애드온 프로가 필요합니다.

Elementor 에서 사용자 정의 아이콘을 세 가지 방법으로 추가할 수 있습니다: 모든 아이콘 필드에 SVG 를 업로드하거나 Elementor Pro 로 자신의 아이콘 글꼴을 가져오거나 Master Addon 에서 추가 아이콘 팩을 켭니다. 세 가지 모두 동일한 아이콘 라이브러리 팝업에 들어가게 되며,여기에는 무언가를 추가할 때까지만 Font Awesome 을 제공합니다.

이 가이드는 클릭할 정확한 설정으로 각 메서드를 살펴본 다음,하나의 테이블에서 비교해 올바른 것을 선택할 수 있습니다. 그 후 스타일링 (색상,크기 및 호버) 과 빈 사각형으로 표시되는 아이콘처럼 사람들이 가장 자주 부딪히는 문제를 다룹니다.

Elementor에서 사용자 정의 아이콘을 추가하는 세 가지 방법

맞는 방법은 필요한 아이콘 수와 이미 파일로 가지고 있는지 여부에 따라 다릅니다.

• 로고 마크와 같은 하나 또는 두 개의 아이콘의 경우 SVG를 아이콘 필드에 바로 업로드합니다(방법 1).
• 나만의 브랜드 세트의 경우 Elementor Pro 의 사용자 지정 아이콘 (방법 2) 으로 아이콘 글꼴로 가져옵니다.
• 업로드할 것이 없는 기성 아이콘을 많이 선택하려면 마스터 애드온(방법 3)에서 아이콘 팩을 켜세요.

한 페이지에 세 가지를 모두 혼합할 수 있습니다. 업로드된 SVG,사용자 지정 아이콘 세트,Font Awesome 및 Master Addons 팩은 모두 같은 페이지에 있을 수 있습니다. 왜냐하면 각각은 동일한 아이콘 필드에 대한 또 다른 소스일 뿐이기 때문입니다.

방법 1: Elementor 의 내장 아이콘 라이브러리 및 SVG 업로드

아이콘 필드가 있는 모든 Elementor 위젯은 아이콘,아이콘 상자,아이콘 목록,버튼 또는 소셜 아이콘이든 동일한 아이콘 라이브러리 팝업을 엽니다. 팝업에 있는 상자에서 글꼴 어썸을 세 세트로 나열합니다: 일반,단색 및 브랜드.

1. 페이지에 아이콘 위젯이나 아이콘이 있는 위젯을 추가하세요.
2. 콘텐츠 탭에서 아이콘 미리보기 위로 마우스를 가져가세요. 두 개의 버튼이 나타납니다: 아이콘 라이브러리 및 업로드 SVG.
3. 아이콘 라이브러리를 클릭하여 멋진 글꼴 아이콘을 선택하거나 SVG를 업로드하여 자신의 파일을 사용하세요.

업로드 SVG 는 클라이언트의 로고 마크와 같은 단일 사용자 지정 아이콘을 추가하는 가장 빠른 방법입니다. WordPress 는 기본적으로 SVG 업로드를 차단하므로 Elementor 가 파일을 거부하는 경우 Elementor > 설정 > 고급에서 필터링되지 않은 파일 업로드 활성화를 켭니다. SVG 는 코드를 전달할 수 있으므로 사이트에 파일을 업로드 할 수있는 모든 사람을 신뢰하는 경우에만 그렇게하십시오.

각 SVG 는 자체 업로드이며 나중에 찾아보거나 검색할 수 있는 설정이 없습니다. Elementor 의 아이콘 라이브러리 도움말 문서 또한 아코디언과 토글 위젯은 일반적인 미리 보기 대신 작은 인라인 아이콘 컨트롤을 사용하지만 동일한 팝업을 엽니다. 아이콘이 몇 개 이상 필요하면 다음 두 가지 방법으로 시간을 절약할 수 있습니다.

방법 2: Elementor Pro 사용자 정의 아이콘으로 설정된 아이콘을 업로드합니다

Elementor Pro 는 별도의 탭으로 자신의 아이콘 글꼴을 피커에 로드할 수 있습니다. 에서 내보낸.zip 파일을 허용합니다 폰텔로, IcoMoon 또는 Fontastic, 그래서 당신은 당신의 브랜드의 SVGs에서 세트를 구축하고 한 곳에 보관할 수 있습니다.

1. Fontello, IcoMoon 또는 Fontastic에서 세트를 빌드하고.zip 파일로 다운로드하세요.
2. WordPress 에서 Elementor 의 사용자 지정 아이콘 화면을 엽니 다. Elementor 4 에서는 Elementor 홈 화면에 바로 가기가 있습니다.
3. 새 아이콘 세트 추가를 클릭하고.zip 파일을 삭제한 다음 세트 이름을 지정하고 게시합니다.
4. 편집기에서 아이콘 필드를 엽니다. 아이콘 라이브러리 팝업의 내 라이브러리 아래에 집합이 나타납니다.

엘리멘터만의 사용자 정의 아이콘 가이드 모든 세트에 필요한 고유한 CSS 접두사를 포함하여 각 서비스의 내보내기 단계를 나열합니다. 이 경로의 캐치는 유지입니다: 세트를 먼저 만들거나 구입하고 변경될 때마다 다시 업로드합니다.

글꼴 연결 Awesome Pro

Elementor Pro 는 Font Awesome Pro 구독도 연결합니다. Elementor > 설정 > 통합으로 이동하여 Font Awesome Pro Kit ID 를 붙여넣고 키트 ID 유효성 검사를 클릭합니다. 그런 다음 Pro 제품군은 표준 Font Awesome 세트 옆의 선택기에 표시됩니다.

방법 3: 마스터 애드온으로 8 개의 아이콘 팩 추가

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 마스터 애드온 아이콘 라이브러리 확장 기능은 아이콘 라이브러리 팝업에 8 개의 완전한 아이콘 팩, 총 5,344 개의 아이콘을 추가합니다. 아무 것도 업로드되지 않습니다: 팩을 켜면 해당 아이콘이 사이트의 모든 아이콘 필드에 나타납니다.

설정은 세 단계를 수행:

1. 마스터 애드온 > 설정 > 확장으로 이동하여 아이콘 라이브러리 필터를 클릭하고 원하는 팩을 켜고 변경 사항 저장을 클릭합니다.

2. Elementor 에서 아이콘 필드를 열고 아이콘 라이브러리를 클릭합니다. 새 팩은 내 라이브러리 아래에 있으며 각 팩에는 작은 “M” 배지가 있습니다.
3. 팩을 클릭하여 찾아보거나 이름으로 필터링 을 입력하여 모든 팩을 한 번에 검색합니다. 아이콘을 선택하고 삽입 을 클릭합니다.

Elementor 의 자체 아이콘 글꼴 (eicons) 은 기본 선택기에 없습니다. Master Addon 은 398 개의 eicons 를 모두 탭으로 추가하여 Elementor 인터페이스와 일치하는 아이콘을 원할 때 도움이됩니다. 깃털 아이콘,리믹스 아이콘 및 Teenyicons 가 함께 제공됩니다 마스터 애드온 프로.

열림 및 닫힘 상태에 Remix Icon 사용

대부분의 리믹스 아이콘 모양은 라인 버전과 채우기 버전으로 제공됩니다. 즉,두 개의 아이콘 상태를 가진 위젯과 잘 일치합니다: in the 고급 아코디언 위젯또는 Elementor 자신의 아코디언 및 토글,윤곽선을 닫힌 아이콘으로 설정하고 채워진 모양을 열린 아이콘으로 설정합니다.

설정 세부 정보, 각 팩의 CSS 클래스 접두사 및 일반적인 문제에 대한 수정 사항은 다음과 같습니다 아이콘 라이브러리 설정 문서.

어떤 방법을 사용해야합니까?

올바른 방법은 이미 가지고 있는 것에 달려 있다.

마지막 행은 자신의 위젯을 만드는 사람들을 위한 것입니다. The 위젯 빌더의 아이콘 제어 동일한 팝업을 열므로 사용자 정의 위젯은 전환 한 모든 팩을 사용할 수 있습니다.

Elementor 에서 아이콘 스타일 지정 방법

이 모든 소스의 아이콘은 위젯의 일반 스타일 컨트롤을 사용합니다. 스타일 탭을 열고 아이콘 섹션을 확장한 후 기본 색상,크기 및 회전을 설정합니다. 방문자가 아이콘을 가리킬 때 색상을 변경하려면 호버 탭으로 전환합니다.

글꼴 아이콘은 설정한 색상을 그대로 사용합니다. 여기에는 Font Awesome,사용자 정의 아이콘 세트 및 마스터 애드온 팩이 포함됩니다. 업로드된 SVG 는 경로에 고유한 고정 채우기가 없는 경우에만 색상이 변경되므로 업로드하기 전에 파일에서 하드 코딩된 채우기 값을 제거합니다.

같은 컨트롤은 다른 아이콘 위젯에도 표시됩니다. The 정보 상자 위젯 아이콘과 제목, 텍스트를 쌍으로 연결하고 가이드를 제공합니다 elementor의 애니메이션 버튼 버튼 안에 아이콘을 배치하고 자체 호버 색상을 지정하는 방법을 보여줍니다.

Elementor 아이콘 문제 해결

대부분의 아이콘 문제는 로딩되지 않은 글꼴 파일이나 저장되지 않은 설정으로 인해 발생합니다.

아이콘은 빈 사각형으로 표시됩니다

아이콘 글꼴이 로드되지 않습니다. Elementor > 도구 > 일반 (파일 및 데이터 지우기) 에서 Elementor 의 캐시를 지운 다음 캐싱 플러그인과 CDN 을 지웁니다. 글꼴이 다른 도메인의 CDN 에서 로드되는 경우 글꼴 파일에 대한 원본 간 요청이 허용되는지 확인합니다.

엘리멘터는 내 SVG를 받아들이지 않을거야

Elementor > Settings > Advanced 에서 필터링되지 않은 파일 업로드 사용 을 켠 다음 다시 업로드를 시도합니다. 그래도 실패하면 텍스트 편집기에서 SVG 를 열고.svg 확장자를 가진 PNG 가 아닌 실제 SVG 파일인지 확인합니다.

마스터 애드온 팩이 선택기에서 누락되었습니다

마스터 애드온 > 설정 > 확장 > 아이콘 라이브러리 아래에서 팩의 스위치가 켜져 있는지 확인하고 변경 사항 저장을 클릭한 다음 편집기를 다시 로드합니다. 깃털 아이콘,리믹스 아이콘 및 Teenyicons 도 활성 라이센스가 있는 마스터 애드온 프로가 필요합니다.

Icon 글꼴은 페이지 속도를 늦춥니다

모든 아이콘 글꼴은 브라우저가 다운로드할 수 있는 하나의 파일입니다. 일관된 모양을 위해 하나 또는 두 개의 팩을 고수하고 가이드를 읽어보세요 elementor 웹사이트 속도 향상아이콘을 글꼴 파일 대신 SVG로 렌더링하기 위한 Elementor의 인라인 글꼴 아이콘 옵션을 다룹니다.

자주 묻는 질문

최종 생각

Elementor 에서 사용자 지정 아이콘을 추가하는 것은 아이콘이 시작되는 곳으로 내려갑니다. 단일 SVG 는 아이콘 필드로 바로 들어갑니다. 브랜드 아이콘 글꼴은 Elementor Pro 의 사용자 지정 아이콘을 통해 들어가고 키트가 있는 경우 Font Awesome Pro 옆에 있습니다. 그리고 업로드하는 것보다 선택하는 것이 낫다면 8 개의 Master Addons 팩은 동일한 팝업에 5,344 개의 아이콘을 더 넣습니다.

스위치를 켜기 전에 샘플과 아이콘 수가 포함된 모든 팩을 보려면 다음을 찾아보세요 Elementor 아이콘 라이브러리 페이지.

관련 읽기

• 아이콘 라이브러리 설정: 8개 팩 모두에 대한 스위치, CSS 접두사 및 문제 해결
• 위젯 빌더의 아이콘 제어: 자신의 사용자 정의 위젯에 팩을 사용하세요
• 문의 양식 7 제출 버튼에 멋진 글꼴 아이콘을 추가하는 방법
• 모든 마스터 애드온 위젯 및 확장