> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/editor/contents/icon.md).

# 아이콘

아이콘 블록에 대해 알아봅니다.

## 아이콘이란?

다양한 형태의 아이콘을 사용하여 페이지 디자인을 할 수 있습니다.

아이콘 블록은 클릭 이벤트 설정이 가능하여 SNS 아이콘을 활용해 사이트 푸터에 SNS 링크를 연결하는 방법으로 디자인 구성이 가능합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FNZZg3JRnXQ3zBEqIeUq8%2F%EC%95%84%EC%9D%B4%EC%BD%98_%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0.png?alt=media&amp;token=b0f670aa-3061-44f4-a432-c15aa02a1f41" alt=""><figcaption></figcaption></figure>

### 블록 설정 방법

1. 사용하려는 블록을 추가합니다.
2. 퀵 메뉴의 상세설정을 클릭합니다.
3. 아래 상세 설정을 참고하여, 설정을 변경합니다.

{% hint style="info" %}
블록을 더블 클릭하여 상세 설정창을 열 수 있습니다.
{% endhint %}

#### 아이콘 블록\_설정 항목

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FAfJWNKmoerU23RO0SvTG%2F%EC%95%84%EC%9D%B4%EC%BD%98_%EC%84%A4%EC%A0%95.png?alt=media&amp;token=fc5b81b8-1be2-4505-8ae1-540e5379a093" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                    |
| -------------------------------------------------------------------------------------------------------- |
| <p><strong>아이콘 선택</strong><br>다양한 아이콘 디자인을 선택합니다.</p>                                                    |
| <p><strong>색상</strong><br>색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul> |