似乎没有类的输入类型'提交'在字体-真棒。是否有可能使用一些类从字体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中学到的:如何制作一个文本+图像的提交按钮?)
HTML
由于<input>元素只显示value属性的值,我们必须只操作它:
<input type="submit" class="btn fa-input" value=" Input">
我使用实体,它对应于U+F043,字体Awesome的“tint”符号。
CSS
然后我们必须使用字体来设置它的样式:
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
这将给我们着色符号在字体Awesome和其他文本在适当的字体。
然而,这个控件不是像素完美的,所以你可能不得不自己调整它。
使用多个提交,当您需要选择提交的值时,可以很容易地做到这一点。只需在表单中创建一个隐藏字段,并根据单击的按钮更改其值。例如,在表单中,你有:
<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>
然后,您可以在“clicked”post变量中检索所单击按钮的值