아이콘

아이콘 필드는 Elementor의 아이콘 선택기를 마스터 애드온으로 구축된 사용자 지정 위젯에 추가합니다 위젯 빌더. 편집자는 아이콘 라이브러리에서 아이콘을 선택하거나 자신의 SVG 를 업로드하고 템플릿이 인쇄합니다. 기능 목록,정보 상자,버튼, 소셜 링크 및 기타 작은 기호가 도움이되는 모든 곳에 사용하십시오.

아이콘은 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

Icons 필드가 하는 일 #

• Elementor의 위젯 패널에 아이콘 라이브러리와 SVG 업로드 버튼이 포함된 아이콘 상자를 추가합니다.
• 아이콘 라이브러리에는 Font Awesome과 Elementor 아이콘, Simple Line 아이콘, Linear 아이콘 및 Material 아이콘과 같은 마스터 애드온과 함께 제공되는 추가 아이콘 세트가 포함되어 있습니다.
• 현장에는 두 가지가 저장됩니다: value (아이콘의 CSS 클래스 또는 업로드를 위한 SVG 파일) 및 library (어느 세트에서 왔는지).
• 템플릿이 인쇄됩니다 <i> 라이브러리 아이콘에 대한 태그와 an <img> 업로드된 SVG에 대한 태그입니다.

아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “기능 목록” 위젯입니다: 이름이 지정된 아이콘 필드입니다 feature_icon 그리고 제목에 대한 텍스트 필드입니다.

Icons 필드를 추가하는 방법 #

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 에 콘텐츠 탭, 예를 들어 섹션을 추가 “기능”.
3. 유형 icons 왼쪽의 필드 검색 상자에.
4. 드래그 아이콘 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.

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

• 라벨 는 Elementor 의 아이콘 상자 위의 텍스트,예를 들어 “Feature Icon”입니다.
• 이름 는 필드의 고유 ID이며 토큰의 시작입니다, 그래서 feature_icon 제공합니다 {{ feature_icon.value }}. 문자, 숫자, 밑줄만 표시됩니다.
• 설명 elementor의 제어하에 나타납니다.
• 스킨 인라인과 미디어를 제공합니다. 그것은 빌더 자신의 미리보기가 필드를 그리는 방법을 변경합니다. 우리의 테스트에서 Elementor 는 큰 아이콘 상자를 어느 쪽이든 보여주었습니다.
• 기본값 는 위젯의 새 복사본으로 시작하는 아이콘입니다. 클릭 아이콘 변경 하나를 선택하거나 작은 십자가를 선택하여 지웁니다. 기본 설정이 없으면 필드는 Elementor 로고 아이콘으로 시작됩니다.

아이콘 변경은 마스터 애드온 아이콘 선택기를 엽니다. 왼쪽의 세트를 선택하고 이름으로 검색한 다음 아이콘을 클릭한 다음 삽입.

템플릿에 아이콘을 인쇄하세요 #

{{ feature_icon }} 필드가 두 값을 보유하기 때문에 자체 인쇄에는 아무것도 없습니다. 대신 해당 부분을 사용하십시오:

• {{ feature_icon.value }} 다음과 같은 라이브러리 아이콘의 아이콘 클래스입니다 eicon eicon-check니다. 업로드 된 SVG 의 경우 파일의 URL 을 인쇄합니다.
• {{ feature_icon.library }} 와 같은 집합명이다 eicons, simple-line-icons 또는 svg 업로드를 위해.
• {{ feature_icon.value.url }} 는 라이브러리가 있을 때 SVG 의 URL 입니다 svg.

편집자는 어느 종류든 선택할 수 있으므로 라이브러리를 확인하고 올바른 태그를 인쇄하십시오. 아이콘이 제거되면 아무것도 인쇄되지 않도록 빈 값에 대한 수표로 모두 감싸십시오:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

라이브러리 아이콘은 글꼴 문자 모양이므로 다음을 사용합니다 color 그리고 font-size 그들 주위의 요소의. an 에 업로드 된 SVG <img> 태그는 고유한 색상을 유지하므로 크기를 조정하세요 width 그리고 height CSS 탭에서.

클릭 설정 저장 다 끝났을 때.

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

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 아이콘 상자에 현재 아이콘이 표시됩니다. 보려면 위로 마우스를 가져가세요 아이콘 라이브러리 그리고 업로드 SVG및 아이콘을 제거하는 휴지통 아이콘입니다.

아이콘 라이브러리 elementor 의 아이콘 창을 엽니다. 왼쪽의 세트를 선택하고 이름으로 필터링한 다음 아이콘을 클릭하고 클릭합니다 삽입. 업로드 SVG 미디어 라이브러리를 열어 SVG 파일을 업로드하거나 선택할 수 있습니다. Elementor 는 SVG 업로드를 처음 허용하도록 요청할 수 있습니다.

글꼴 멋진 아이콘과 인라인 글꼴 아이콘 #

우리의 테스트 사이트에서 Elementor Icons,Simple Line Icons 및 업로드 된 SVG 는 모두 게시 된 페이지에 표시되었지만 Font Awesome 아이콘은 표시되지 않았습니다. Elementor 의 인라인 글꼴 아이콘 기능은 기본적으로 켜져 있으며 Font Awesome 스타일시트의 로딩을 중지합니다 <i> 위젯의 태그는 비어 있습니다. 로 이동 Elementor > 설정 > 기능인라인 글꼴 아이콘을 다음으로 설정합니다 비활성 그리고 저장합니다. 그러면 Font Awesome 아이콘이 나타났습니다. 해당 기능을 계속 켜두려면 다른 아이콘 세트나 SVG 업로드를 사용하세요.

일반적인 사용 사례 #

• 각 제목 옆에 아이콘이 있는 기능 목록 및 정보 상자입니다.
• 앞 또는 뒤 아이콘이 있는 버튼.
• 소셜 링크, 연락처 및 목록 글머리 기호.
• 로고를 SVG로 업로드하여 브랜드 마크를 표시합니다.

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

• 항상 템플릿에서 두 경우를 모두 처리하십시오: <i> 라이브러리 아이콘 및 <img> SVG 업로드의 경우.
• 경비하다 {% if feature_icon.value %} 그래서 빈 아이콘은 빈 래퍼를 남기지 않습니다.
• 위젯에 맞는 기본 값을 설정하여 실수로 Elementor 로고가 표시되지 않도록 합니다.
• 아이콘 태그가 아닌 래퍼를 스타일링하여 두 아이콘 유형이 같은 상자에 들어 있습니다.
• 라이브 페이지에서 글꼴 멋진 선택을 확인한 후 의존하세요(위 섹션 참조).
• 아이콘이 아닌 이미지의 경우 다음을 사용하십시오 미디어 분야.

자주 묻는 질문 #

감싸는 #

아이콘 필드를 추가하고 기본 아이콘을 설정한 다음 라이브러리 아이콘과 SVG 업로드를 모두 처리하는 템플릿으로 인쇄합니다. 게시된 페이지에서 글꼴 멋진 선택을 확인하고,비어 있는 경우 인라인 글꼴 아이콘을 끕니다. 다른 콘텐츠 탭 필드는 다음을 참조하세요 URL 그리고 선택 필드 및 확인 가격 각 계획에 포함된 내용입니다.