Font-awesome,입력 형식'제출'
-
12-12-2019 - |
문제
이 없을 것으로 보인 등을 위해 입력 형식'제출'에 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=" Input">
.
u + f043에 해당하는 
엔티티를 사용하고 있습니다.
CSS
다음은 글꼴을 사용하기 위해 스타일을 구성해야합니다.
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.
글꼴 굉장한 색조 심볼과 적절한 글꼴의 다른 텍스트를 제공합니다.
그러나이 컨트롤은 픽셀 완벽하지 않으므로 자신이 조정해야 할 수도 있습니다.
글꼴 멋진 UTF 치트 시트를 사용할 수 있습니다
<input type="submit" class="btn btn-success" value=" 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 변수
에서 클릭 한 것입니다.