연락처 양식 7을 사용하여 워드프레스에서 제출할 FontAwesome 아이콘을 추가하는 방법?

연락처 양식 7을 사용하여 워드프레스에서 제출할 FontAwesome 아이콘을 추가하는 방법?

연락처 양식 7을 사용하여 워드프레스에서 제출할 멋진 화살표 아이콘을 추가하려고 합니다.CSS에 다음과 같은 내용이 있습니다: [클래스 제출: 버튼 "메시지 보내기 "]

.wpcf7-submit:before {
    content: '\f30b';
    font-family: 'Font Awesome 5 Free' !important;
}

그리고 효과가 없어요, 무슨 생각 있어요?

파티에 좀 늦었다는 것은 알지만, 제 제출 버튼에 아이콘을 표시하는 데 도움이 되는 더 쉬운 옵션(또는 적어도 그렇게 생각했습니다!)을 발견했습니다.

의사 요소는 필요하지 않고 연락처 양식에 요소를 직접 삽입하면 됩니다.

<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

다음과 같이 단추에 스타일을 추가할 수도 있습니다.

/*Then you can add whatever style you want to your button*/

button.wpcf7-submit {
  background: #31D1D3;
  padding: 10px 15px;
  border: 0;
}

button.wpcf7-submit i {
  margin-left: 5px
}

button.wpcf7-submit:hover {
  color: white;
}

button.wpcf7-submit:hover i {
  color: white;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->


<!--add the following instead of [submit] in Contact Form 7-->

<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

업데이트:

CF7 대신 폰트 어썸 아약스 로더 사용 가능!

/*Then you can add whatever style you want to your button*/

button.wpcf7-submit {
  background: #31D1D3;
  padding: 10px 15px;
  border: 0;
}

button.wpcf7-submit i {
  margin-left: 5px
}

button.wpcf7-submit:hover {
  color: white;
}

button.wpcf7-submit:hover i {
  color: white;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->


<!--add the following instead of [submit] in Contact Form 7-->

<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<i class="fab fa-github ajax-loader" style="visibility: hidden; opacity: 1;"></i>

업데이트:

연락처 양식 7은 기본적으로 다음을 사용합니다.<input type="submit">submit 버튼의 element.input요소에 자식 노드가 없으므로 요소는 의사 요소 뒤에 :::before/::를 사용할 수 없습니다.

FontA 일부 아이콘을 추가하려면 제출 단추를 실제 단추(여기에 표시)로 변경해야 합니다.

---

또한 다음을 지정해야 합니다.font-weight속성, 그렇지 않으면 브라우저에서 글꼴이 로드되지 않습니다.

.wpcf7-submit::before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<form action="" method="post">
  <button type="submit" class="wpcf7-submit">
    Send
  </button>
</form>

언급URL : https://stackoverflow.com/questions/54149352/how-to-add-fontawesome-icon-to-submit-button-in-wordpress-using-contactform7