글꼴을 추가하는 방법 멋진 아이콘 문의 양식 7 제출 버튼

문의 양식에 있는 일반 “제출” 버튼은 일반적으로 보입니다. a 추가하기 연락처 양식 7 제출 버튼 안에 멋진 아이콘을 글꼴하세요 주의를 끌고 행동을 더 명확하게 하는 시각적 신호를 줍니다. “메시지 보내기” 옆에 있는 종이 평면 아이콘이나 “제출하기” 옆에 있는 봉투 아이콘을 생각해 보세요

캐치? 문의 양식 7 에는 버튼에 아이콘을 추가하는 옵션이 내장되어 있지 않습니다. 아이콘의 유니코드 16 진수 코드를 CF7 양식 태그에 직접 삽입하고 작은 CSS 스니펫과 페어링하여 올바른 글꼴을 로드해야 합니다.

이 튜토리얼에서는 전체 과정을 단계별로 안내합니다. a 를 추가하는 방법을 배우게 됩니다 CF7 제출 버튼에 멋진 아이콘을 글꼴하세요를 선택하고 양식 필드 자리 표시자 안에 아이콘을 추가하고 Elementor 사용자와 Elementor 이외의 설정 모두에 대해 Font Awesome 글꼴 계열 설정을 처리합니다. Font Awesome 5,6 및 최신 2026 Elementor 버전에 대해 업데이트되었습니다.

필요한 것

시작하기 전에, 당신이 장소에 이러한 있는지 확인하십시오:

• 워드 프레스 와 함께 문의 양식 7 설치 및 활성화
• 글꼴 굉장 사이트에 로드됩니다(Elementor, 플러그인 또는 수동 CDN을 통해)
• 테마에 대한 액세스 사용자 정의 CSS 패널 (외관 > 사용자 지정 > 추가 CSS)
• 원하는 아이콘의 유니코드 16 진수 코드 (이것을 찾을 수 있는 곳을 보여드리겠습니다)

소요시간: 5-10분

기술 수준: 초급자 (코딩 경험이 필요없고 복사해서 붙여넣기만 하면 됩니다)

1 단계: 사이트에서 멋진 글꼴을 활성화합니다

귀하의 사이트는 어떤 아이콘이 렌더링되기 전에로드 된 글꼴 어썸이 필요합니다. 이 작업을 수행하는 방법은 설정에 따라 다릅니다:

Elementor 를 사용하고 있다면 (가장 쉬운 방법)

Elementor 는 Font Awesome 이 내장되어 제공됩니다. 이전 아이콘 코드를 사용하는 경우 Font Awesome 4 이전 버전과의 호환성이 활성화되어 있는지 확인하면 됩니다.

1. 로 이동 Elementor > 설정 > 고급 워드 프레스 대시 보드에 탭
2. 찾기 “글꼴 Awesome 4 지원 로드” 그리고 로 설정합니다 “예” 라고요
3. 클릭 변경 사항 저장

2026 업데이트: Elementor 는 이제 최신 버전에서 기본적으로 Font Awesome 6 을 로드합니다. “Load Font Awesome 4 Support” 토글은 이전 아이콘 코드와의 하위 호환성을 보장합니다. FA6 아이콘 코드를 사용하는 경우 (from the 글꼴 굉장 6 아이콘 검색), elementor 가 자동으로 처리하므로 변경할 필요가 없습니다.

혹시 당신도 사용하고 있다면 Elementor용 마스터 애드온에 접근할 수 있습니다 8 개의 프리미엄 아이콘 라이브러리 글꼴 멋진 넘어, 당신에게 추가 아이콘의 수천을 제공 바로 Elementor 편집기 내부.

Elementor를 사용하지 않는 경우

관원 설치 글꼴 멋진 플러그인 wordpress.org 에서. 활성화 후:

1. 로 이동 설정 > 글꼴 굉장함
2. 버전을 선택하세요(Font Awesome 5 무료 또는 6 무료)
3. 배송 방법(v5의 경우 CDN, v6의 경우 키트)을 선택하세요
4. 저장하면 사이트 전체에서 아이콘을 사용할 준비가 된 것입니다

중요한: Font Awesome 6 는 레거시 CDN 을 통해 사용할 수 없습니다. FA6 아이콘을 원한다면 에서 무료 키트를 설정해야합니다 fontawesome.com 또는 WordPress 플러그인의 Kit 통합을 사용하십시오.

2 단계: 아이콘의 유니코드 육각 코드를 찾습니다

모든 글꼴 멋진 아이콘에는 고유한 유니코드 16 진수 코드가 있습니다. 연락처 양식 7 제출 버튼에 붙여넣을 코드입니다.

찾는 방법은 다음과 같습니다:

1. 로 이동 글꼴 멋진 아이콘 검색 페이지
2. 원하는 아이콘 (예를 들어, “종이 평면”, “봉투”, “오른쪽 화살표”) 을 검색합니다
3. 아이콘을 클릭하면 세부정보 페이지가 열립니다
4. 를 찾아라 유니코드 값. 같은 4-5 자 16 진수 코드입니다 f1d8 (종이 평면) 또는 f0e0 (봉투)

다음은 제출 버튼과 해당 유니코드 코드에 대한 인기 있는 아이콘입니다:

3단계: 연락처 양식 7 제출 버튼에 멋진 글꼴 아이콘을 추가합니다

이제 메인 이벤트로. 아이콘의 유니코드 16 진수 코드를 CF7 폼 태그에 직접 삽입합니다. 정확한 과정은 다음과 같습니다:

문의 양식을 엽니다

로 이동 연락처 > 문의 양식 워드프레스 대시보드에서. 편집 (또는 새 양식 만들기) 하고 싶은 양식을 클릭합니다.

제출 버튼 태그 찾기

양식 편집기에서 제출 버튼 태그를 찾으십시오. 일반적으로 다음과 같습니다:

[submit "Submit"]

유니코드 Hex Code 를 삽입합니다

제출 태그를 버튼 텍스트 옆에 놓인 아이콘 코드로 바꿉니다. HTML 엔터티 형식 사용 &#x + 육각 코드 + ;

예를 들어 “메시지 보내기” 텍스트 뒤에 종이 평면 아이콘을 추가하려면:

[submit "Send Message "]

또는 텍스트 앞에 아이콘을 넣으려면:

[submit " Send Message"]

제출 버튼에 아이콘이 있는 완전한 문의 양식 예가 있습니다:

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

4단계: 아이콘 글꼴에 CSS를 추가합니다

제출 버튼에 사용할 글꼴을 브라우저에 알려줄 때까지 아이콘이 올바르게 표시되지 않습니다. 이 CSS 가 없으면 아이콘 대신 작은 사각형 또는 물음표가 표시됩니다.

로 이동 외관 > 사용자 지정 > 추가 CSS 그리고 다음 조각 중 하나를 붙여넣으세요:

Font Awesome 5(엘리멘터 기본값)의 경우

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

글꼴 멋진 6 에 대한

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

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 font-weight: 900 는 Solid 아이콘 (가장 일반적인 스타일) 에 필요합니다. Regular 아이콘을 사용 중이라면 로 변경하세요 font-weight: 400. 브랜드 아이콘(Twitter 또는 GitHub 로고 등)의 경우 다음을 사용하십시오 font-family: "Font Awesome 6 Brands" 와 함께 font-weight: 400.

프로 팁: 아이콘이 데스크톱에는 표시되지만 모바일에는 표시되지 않는 경우 추가합니다 -webkit-font-smoothing: antialiased; 그리고 text-rendering: auto; CSS 규칙에. 이것은 브라우저에 걸쳐 렌더링 불일치를 해결합니다.

CSS 를 저장하고 양식을 미리 봅니다. 이제 텍스트 옆에있는 제출 버튼 안에 렌더링 된 아이콘이 표시되어야합니다.

보너스: 글꼴 멋진 아이콘을 CF7 자리 표시자 필드에 추가합니다

양식 필드 자리 표시자 안에도 아이콘을 원하십니까? 이메일 필드에 봉투 아이콘,이름 필드에 사용자 아이콘,메시지 필드에 연필 아이콘을 추가할 수 있습니다. 동일한 유니코드 접근 방식을 사용합니다.

자리 표시자에 아이콘이 있는 CF7 코드는 다음과 같습니다:

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

이제 CSS 를 추가하여 Font Awesome 글꼴을 자리 표시자에 적용합니다:

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

자리 표시자 글꼴에 대한 참고 사항: 설정 font-family on placeholders 는 아이콘뿐만 아니라 모든 placeholder 텍스트에 영향을 미칩니다. 나머지 placeholder 텍스트가 예상과 다르게 보이면 테마의 본문 글꼴을 대체 항목으로 추가하십시오: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

코드 없음 방법: Elementor용 마스터 애드온이 포함된 스타일 CF7

차라리 CSS를 완전히 건너뛰고 싶다면 Elementor용 마스터 애드온 전용이 포함되어 있습니다 문의 양식 7 코드 한 줄도 작성하지 않고도 양식의 모양을 시각적으로 사용자 정의할 수 있는 위젯입니다.

당신이 할 수 있는 일은 다음과 같습니다 MA 문의 양식 7 위젯:

• 제출 버튼의 스타일을 지정합니다 사용자 정의 색상, 그라데이션, 호버 효과, 테두리 및 패딩이 있습니다
• 입력 필드 사용자 지정 배경색, 테두리 반경, 타이포그래피가 있습니다
• 사전 구축된 스타일 사전설정을 적용합니다 한 번의 클릭으로 세련된 양식을 얻으려면
• 간격 및 레이아웃 제어 elementor 패널의 모든 폼 요소에 대해
• 아이콘을 사용하세요 부터 8 개의 프리미엄 아이콘 라이브러리 마스터 애드온과 함께 번들로 제공됩니다

CSS 선택기를 파고들지 않고 연락처 양식이 사이트의 디자인과 일치하도록 하려면 가장 빠른 접근 방식입니다. 위젯을 끌어다가 양식을 선택하고 비주얼 편집기에서 모든 것을 스타일링하면 됩니다.

일반적인 문제 해결

아이콘은 사각형 상자나 물음표로 표시됩니다

제출 버튼에 대해 Font Awesome 글꼴이 로드되지 않음을 의미합니다. 다시 확인:

• Font Awesome이 사이트에서 활성화됩니다(Elementor 설정 또는 FA 플러그인)
• 귀하의 CSS에는 올바른 내용이 포함되어 있습니다 font-family 그리고 font-weight
• 올바른 버전을 사용하고 있습니다 (FA5 대 FA6 글꼴 계열 이름은 다릅니다)

아이콘이 나타나지만 일반 텍스트가 이상해 보입니다

설정하면 font-family 전체 버튼에 대해 Font Awesome 으로,버튼의 모든 텍스트는 해당 글꼴을 사용합니다. 대체 글꼴 추가: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

아이콘은 데스크톱에서는 작동하지만 모바일에서는 작동하지 않습니다

이러한 속성을 CSS 규칙에 추가하십시오:

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

대신 pseudo-element 이전에 ::를 사용하고 싶습니다

CF7 제출 버튼은 다음과 같습니다 <input type="submit"> element.input 요소는 지원하지 않습니다 ::before 또는 ::after 의사 요소는 하위 노드를 가질 수 없기 때문입니다. 그래서 대신 버튼 텍스트에서 유니코드 16 진수 접근 방식을 직접 사용합니다. 의사 요소 지원이 필요하면 제출 버튼을 a 로 변환해야 합니다 <button> 사용자 정의 PHP가 필요한 CF7 필터 후크를 사용하여 태그를 지정합니다.

자주 묻는 질문

감싸는 중

a를 추가합니다 연락처 양식 7 제출 버튼에 멋진 아이콘을 글꼴하세요 는 눈에 띄는 차이를 만드는 작은 변화입니다. 유니코드 16 진수 코드 방법은 Font Awesome 5,6 에서 작동하며 두 단계만 거치면 되며 (양식 태그 편집 + CSS 추가) 설정에 5 분 미만이 소요됩니다.

자리 표시자 접근 방식의 경우 동일한 논리가 적용됩니다: 자리 표시자 속성 안에 16 진수 코드를 붙여넣고 CSS 에서 글꼴 계열을 정의합니다. 두 방법 모두 양식에 더욱 세련되고 전문적인 느낌을 줍니다.

CSS를 완전히 건너뛰고 싶다면 마스터 애드온 CF7 위젯 elementor 내부에서 양식 스타일링을 시각적으로 처리합니다. 어느 쪽이든 양식이 기본 CF7 출력보다 더 좋아 보입니다.

관련 읽기: Elementor 아이콘 및 글꼴 라이브러리 가이드 | Elementor에서 애니메이션 버튼을 만드는 방법 | 마스터 애드온을 사용한 CF7 스타일링