아이콘

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 아이콘 필드 위젯의 패널에 Elementor 의 전체 아이콘 라이브러리 선택기를 넣습니다: Font Awesome,사이트에 등록된 모든 사용자 지정 아이콘 라이브러리,직접 SVG 업로드,아이콘 선택기 편집자가 이미 알고 있는 모든 항목 뒤에 마스터 애드온 내부 위젯 빌더는 작은 기호가 의미를 전달하는 기능 글머리 기호, 정보 상자, 소셜 행 및 기타 모든 지점을 위한 필드입니다.

모든 위젯 빌더 필드와 마찬가지로 아이콘 컨트롤이 지원됩니다 조건“아이콘 활성화” 토글이 켜져 있고 해당 출력이 다음을 통해 렌더링되는 경우에만 피커를 표시하는 데 유용합니다 나뭇가지 구문 템플릿 엔진. 두 가이드 모두 세부 사항과 제한 사항을 다룹니다.

값은 두 개의 키가 있는 배열입니다 value 그리고 library. 그 모양은 앞에 진술할 가치가 있는 결과를 가지고 있습니다: 분야를 직접 인쇄하는 것 {{ my_icon }} 전혀 출력하지 않습니다. 글꼴 아이콘과 업로드된 SVG 도 다른 마크업을 통해 렌더링되므로 템플릿에 짧은 분기가 필요합니다. 두 패턴 모두 아래에 있으며 붙여넣을 준비가 되어 있습니다.

Icons 필드가 하는 일 #

• Elementor 의 아이콘 라이브러리 선택기를 엽니다 font Awesome, 사용자 정의 라이브러리 및 SVG 업로드를 사용합니다.
• 픽을 배열로 저장합니다 의 value 그리고 library.
• 글꼴 아이콘에 대한 클래스 문자열을 보유합니다: value 아이콘의 클래스입니다 <i> 태그.
• SVG 에 대한 중첩 파일 배열을 보유합니다: value 로 도달한 URL 및 ID 쌍이 됩니다 {{ my_icon.value.url }}.
• 기본값과 권장 목록을 수락합니다따라서 선택기는 위젯에 맞는 아이콘을 표시할 수 있습니다.

위젯을 처음 구축했다면 다음부터 시작하세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 각 인스턴스에 이름이 지정된 하나의 아이콘이 표시되는 기능 목록 위젯입니다 feature_icon, 짧은 텍스트 광고문 옆에.

Icons 필드를 추가하는 방법 #

찾기 아이콘 widget Builder 편집기 왼쪽 패널의 필드를 다른 미디어 필드와 그룹화합니다.

아래의 섹션으로 드래그하세요 콘텐츠 탭. 일단 착지하면 필드의 옵션이 왼쪽에 열립니다.

아이콘 필드 옵션이 설명되었습니다 #

• 라벨: elementor의 선택기 위에 표시된 텍스트, 예를 들어 “Feature Icon”입니다.
• 이름: 예를 들어 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다 feature_icon.
• 기본값: 시작 아이콘은 다음과 같습니다 value 그리고 library 쌍을 이루므로 위젯은 아이콘 없이 떨어지지 않습니다.
• 추천: 피커가 먼저 표면에 나타나는 아이콘 세트로 편집자를 디자인에 맞는 선택으로 안내합니다.
• 설명, 라벨 표시, 분리기: 표준 표시 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하는 조건이 추가됩니다.

아이콘 필드를 템플릿에 연결합니다 #

첫째, 거의 모든 사람이 한 번 저지르는 실수: {{ feature_icon }} 아무것도 인쇄하지 않습니다. 배열 값에 대한 직접 인쇄 바로가기는 최상위 수준만 출력합니다 url key,그리고 Icons 배열은 none 을 가지고 있으므로 토큰은 빈 상태로 나옵니다. 오류도 없고 경고도 없고 아이콘이 있어야 할 빈 자리만 있습니다. 속성은 콘텐츠가 사는 곳입니다.

글꼴 아이콘 (Font Awesome 및 기타 클래스 기반 라이브러리): value 클래스 문자열을 보유하므로 an <i> 태그는 그것을 렌더링합니다:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

업로드된 SVG: 픽이 SVG 라이브러리에서 나오면, value 는 그 자체로 URL과 ID가 있는 배열이므로 아이콘은 이미지로 렌더링합니다:

<img src="{{ feature_icon.value.url }}" alt="">

위젯은 편집자가 어떤 종류를 선택할지 미리 아는 경우가 거의 없으므로 신뢰할 수 있는 패턴이 위젯에서 분기됩니다 library 키와 핸들 모두:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

모든 미디어 유형 필드와 마찬가지로 모든 것을 빈 상태 가드로 감싸서 설정되지 않은 아이콘이 길을 잃지 않도록 하세요 <i class=""> 뒤에:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

글꼴 아이콘만으로 테스트 조심하세요. The <i>-태그 버전은 일주일 내내 작동한 다음 클라이언트가 브랜드 SVG를 업로드하고 클래스 속성이 파일 배열을 보유할 수 없기 때문에 아이콘이 사라집니다. 필드를 배송하는 경우 지점을 배송합니다.

Elementor 에서 아이콘 컨트롤을 사용합니다 #

사용자 정의 위젯을 Elementor 의 페이지에 추가하고,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 필드는 레이블 아래에 Elementor 의 아이콘 선택기로 렌더링되어 현재 아이콘을 표시합니다.

클릭하면 아이콘 라이브러리가 열립니다. 글꼴 멋진 검색,사용자 지정 라이브러리 탐색 또는 SVG 의 업로드 탭으로 전환합니다. 템플릿의 라이브러리와 일치하는 지점을 통해 실행되는 선택 및 미리보기 업데이트를 확인합니다.

일반적인 사용 사례 #

• 기능 및 혜택 목록 포인트당 하나의 기호가 있습니다.
• 정보 및 아이콘 상자 아이콘이 카드의 주제를 고정하는 위치.
• 소셜 링크 행, 각 인스턴스는 아이콘과 URL 필드를 페어링합니다.
• 버튼 및 행동 촉구 작은 주요 아이콘이 있습니다.
• 단계 및 프로세스 위젯 번호가 매겨진 단계는 각각 일치하는 기호를 얻습니다.

아이콘 필드와 작업하기 위한 팁 #

• 필드를 맨손으로 인쇄하지 마십시오. {{ feature_icon }} 아무것도 출력하지 않습니다; 아이콘이 살고 있습니다 {{ feature_icon.value }} 그리고 SVG의 경우 {{ feature_icon.value.url }}.
• 도서관 지점을 발송합니다. 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 {% if feature_icon.library == 'svg' %} 패턴은 편집자가 만들 수 있는 모든 선택에서 살아남는 유일한 버전입니다.
• 빈 상태를 지키다. {% if feature_icon.value %} 설정되지 않은 아이콘이 빈 태그를 렌더링하지 못하도록 합니다.
• 추가 aria-hidden="true" 장식 글꼴 아이콘에. 화면 판독기는 기호를 건너뛰고 대신 기호 옆에 있는 텍스트를 읽습니다.
• 추천을 사용하여 선택을 안내하세요. 선별된 세트를 표면화하면 사이트 전체에서 위젯의 아이콘이 시각적으로 일관되게 유지됩니다.
• CSS 탭에서 SVG 크기를 조정합니다. 업로드된 SVG는 이미지로 도착하므로 img 분기에 너비를 주어 두 분기의 렌더링을 동일한 축척으로 유지합니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 아이콘 필드는 하나의 짧은 지점 가격으로 전체 Elementor 아이콘 라이브러리를 사용자 정의 위젯으로 가져옵니다: value 글꼴 아이콘을 위한 클래스로, value.url SVG용 파일이자 둘 다에 대한 경비원입니다. 와 페어링하세요 미디어 분야 슬롯이 기호가 아닌 전체 이미지를 호출하는 경우. 나머지 탐색 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.