글꼴이 멋진 입력 유형 'submit'에 대한 클래스가없는 것 같습니다. 버튼 입력을 위해 font-awesome의 클래스를 사용할 수 있습니까? 내 응용 프로그램의 모든 버튼 (실제로 twitter-bootstrap의 'btn'클래스와 링크 됨)에 아이콘을 추가했지만 '입력 유형 제출'에 아이콘을 추가 할 수 없습니다.

또는이 코드를 사용하는 방법 :

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html :

<input type="submit" id="image-button">Text</input>

( HTML 에서 가져 왔습니다 : 텍스트 + 이미지로 제출 버튼을 만드는 방법은 무엇입니까? )

입력 대신 버튼 type = "submit"사용

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

Font Awesome 3.2.0 용

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

HTML

<input>element는 value 속성의 값만 표시 하므로 조작해야합니다.

<input type="submit" class="btn fa-input" value="&#xf043; Input">

여기서는 Font Awesome의 'tint'기호 인 U + F043에 해당하는 엔티티를 사용하고 있습니다.

CSS

그런 다음 글꼴을 사용하도록 스타일을 지정해야합니다.

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Font Awesome의 색조 기호와 적절한 글꼴의 다른 텍스트가 표시됩니다.

그러나이 컨트롤은 완벽한 픽셀이 아니므로 직접 조정해야 할 수도 있습니다.

당신은 글꼴 멋진 utf 치트 시트를 사용할 수 있습니다

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

여기는 치트 시트에 대한 링크입니다 http://fortawesome.github.io/Font-Awesome/cheatsheet/

글쎄, 기술적으로는 얻을 수는 없습니다 :before및 :after의사 요소는 작업 input요소

에서 W3C :

12.1 의사 요소 앞과 뒤에 :

작성자는 : before 및 : after 유사 요소로 생성 된 컨텐츠의 스타일과 위치를 지정합니다. 이름에서 알 수 있듯이 : before 및 : after 유사 요소는 요소의 문서 트리 내용 전후에 내용의 위치를 ​​지정합니다. 이러한 의사 요소와 함께 'content'속성은 삽입되는 내용을 지정합니다.

그래서 input태그 형식의 버튼을 제출 한 프로젝트가 있었고 어떤 이유로 다른 개발자 <button>가 일반적인 입력 제출 버튼 대신 태그 사용을 제한 했기 때문에 버튼을 span세트 안에 넣는 다른 솔루션을 생각해 냈습니다. 로 position: relative;하고 절대적으로 사용하여 아이콘을 위치 :after슈도.

참고 : 데모 바이올린은 FontAwesome 3.2.1의 콘텐츠 코드를 사용하므로 content그에 따라 속성 값을 변경해야 할 수도 있습니다 .

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

이제 여기에 하나의 속성에 대한 모든 설명이 필요합니다. 즉 pointer-events: none;, :after의사 생성 콘텐츠 위에 마우스를 올려 놓으면 버튼이 클릭되지 않으므로 값을 사용 none하면 클릭 액션이 해당 콘텐츠를 통과하게됩니다. .

에서 모질라 개발자 네트워크 :

요소가 마우스 이벤트의 대상이 아님을 나타내는 것 외에도 값 none은 마우스 이벤트가 요소를 "통과"하고 해당 요소의 "아래"를 대상으로 지정하도록 지시합니다.

하트 글꼴 / 아이콘 Demo을 가리키고 사용하지 않으면 어떻게되는지 확인pointer-events: none;

당신은 버튼 클래스를 사용할 수 btn-link및 btn-xs유형과 submit그것의 아이콘 내부에 작은 눈에 보이지 않는 버튼을 만들 것이다. 예:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

이와 같이 가능

<button type="submit" class="icon-search icon-large"></button>

제출이 여러 개인 경우 제출 값을 선택해야 할 때 매우 쉽게 수행 할 수 있습니다. 양식에 숨겨진 필드를 만들고 클릭 한 버튼에 따라 값을 변경하십시오. 예를 들어, 양식에 다음이 있다고 가정하십시오.

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

jQuery 사용하기 :

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

그런 다음 "클릭 한"포스트 변수에서 클릭 한 버튼의 값을 검색 할 수 있습니다.