Font-awesome,입력 형식'제출'

StackOverflow https://stackoverflow.com//questions/11686007

문제

이 없을 것으로 보인 등을 위해 입력 형식'제출'에 font-awesome.그것은 사용 가능한 몇 가지에서 클래스는 글꼴-멋진을 위해 버튼을 입력?추가했 아이콘이 모든 단추(실제로 링크와 함께 클래스'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:을 만드는 방법을 제출 버튼으로 텍스트+이미지에 그것은? 가)font-awesome?

도움이 되었습니까?

해결책

입력 대신 버튼 유형="제출"사용 

<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> 요소는 값 속성의 값만 표시되므로 다음과 같이 조작해야합니다. 

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

u + f043에 해당하는 &#xf043; 엔티티를 사용하고 있습니다.

CSS

다음은 글꼴을 사용하기 위해 스타일을 구성해야합니다. 

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

글꼴 굉장한 색조 심볼과 적절한 글꼴의 다른 텍스트를 제공합니다.

그러나이 컨트롤은 픽셀 완벽하지 않으므로 자신이 조정해야 할 수도 있습니다.

글꼴 멋진 UTF 치트 시트를 사용할 수 있습니다 

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

여기에 치트 시트의 링크가 있습니다. http://fortawesome.github.io/font-awesome/cheatsheet/

론,기술적으로 가능하지 않을 얻 :before 고 :after 의사소에서 작동 input 소

서 W3C:

12.1:전과:의사소

저자 지정한 스타일의 위치와 생성되는 콘텐츠 :전과:의사 요소입니다.으로 자신의 이름을 나타내는 :전과:의사의 요소의 위치를 지정 컨텐츠 전후에는 요소의 문서 나무 내용입니다.'콘텐츠' 성과 함께,이러한 의사소,지정하는 것입니다 삽입됩니다.

그래서 나는 프로젝트었던 곳에 제출 버튼 형태의 input 태그와 어떤 이유로 다른 개발자들이 제한된 사 <button> 태그신의 일반적인 입력을 제출 버튼 그래서 저는 다른 솔루션의 포장 버튼 내부에서 span 설정 position: relative; 그리고 절대적으로 위치를 사용하여 아이콘 :after 의사입니다.

참고:모 바이올린 콘텐츠를 사용하여 코드 FontAwesome3.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;
}

데모

이제 여기에 모든 것은 자명,여기에 중 하나에 대한 속성을 검색합니다.e pointer-events: none;, 에,나는 것을 사용했기 때문에 유혹 :after 의사 콘텐츠의 버튼을 누르지 않을 것이다,그래서 사용하는 값의 none 을 강제로 작업을 클릭스를 통해하는 내용입니다.

서 Mozilla 개발자 네트워크 :

또한을 나타내는 요소를 대상의 마우스 이벤트 값이 없도록 마우스 이벤트이"가"를 통해 요소를 대상이 무엇이"아래"하는 요소를 대신 합니다.

버 중심 글꼴/아이콘 데모 고 무슨 일이 일어나 사용하지 않는 경우 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>
.

다음 버튼의 값을 "클릭 한"POST 변수

에서 클릭 한 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top