Font-awesome, input type 'submit'
Twitter BootstrapTwitter Bootstrap-RailsFont AwesomeTwitter Bootstrap Problem Overview
There seems to be no class for input type 'submit' in font-awesome. Is it possible to use some class from font-awesome for button input? I've added icons to all buttons (which actually links with class 'btn' from twitter-bootstrap) in my applications, but can't add icons on 'input type submit'.
Or, how to use this code:
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>
(which I took from https://stackoverflow.com/questions/1621891/html-how-to-make-a-submit-button-with-text-image-in-it) with font-awesome?
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
use button type="submit" instead of input
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>
for Font Awesome 3.2.0 use
<button type="submit" class="btn btn-success">
<i class="icon-circle-arrow-right icon-large"></i> Next
</button>
Solution 2 - Twitter Bootstrap
HTML
Since <input>
element displays only value of value attribute, we have to manipulate only it:
<input type="submit" class="btn fa-input" value=" Input">
I'm using 
entity here, which corresponds to the U+F043, the Font Awesome's 'tint' symbol.
CSS
Then we have to style it to use the font:
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Which will give us the tint symbol in Font Awesome and the other text in the appropriate font.
However, this control will not be pixel-perfect, so you might have to tweak it by yourself.
Solution 3 - Twitter Bootstrap
You can use font awesome utf cheatsheet
<input type="submit" class="btn btn-success" value=" Login"/>
here is the link for the cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/
Solution 4 - Twitter Bootstrap
Well, technically it's not possible to get :before
and :after
pseudo elements work on input
elements
From W3C:
>
> Authors specify the style and location of generated content with the > :before and :after pseudo-elements. As their names indicate, the > :before and :after pseudo-elements specify the location of content > before and after an element's document tree content. The 'content' > property, in conjunction with these pseudo-elements, specifies what is > inserted. 12.1 The :before and :after pseudo-elements
So I had a project where I had submit buttons in the form of input
tags and for some reason the other developers restricted me to use <button>
tags instead of the usual input submit buttons, so I came up with another solution, of wrapping the buttons inside a span
set to position: relative;
and then absolutely positioning the icon using :after
pseudo.
> Note: The demo fiddle uses the content code for FontAwesome 3.2.1 so
> you may need to change the value of content
property accordingly.
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;
}
Now here everything is self explanatory here, about one property i.e pointer-events: none;
, I've used that because on hovering over the :after
pseudo generated content, your button won't click, so using the value of none
will force the click action to go pass through that content.
From Mozilla Developer Network :
> In addition to indicating that the element is not the target of mouse > events, the value none instructs the mouse event to go "through" the > element and target whatever is "underneath" that element instead.
Hover the heart font/icon Demo and see what happens if you DON'T use pointer-events: none;
Solution 5 - Twitter Bootstrap
You can use button classes btn-link
and btn-xs
with type submit
, which will make a small invisible button with an icon inside of it. Example:
<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
<i class="fa fa-times text-danger"></i>
</button>
Solution 6 - Twitter Bootstrap
Also possible like this
<button type="submit" class="icon-search icon-large"></button>
Solution 7 - Twitter Bootstrap
With multiple submits, when you need the value of the submit selected, this can be done quite easily. Just create a hidden field in your form and change its value depending on what button is clicked. For example, in the form, say you have:
<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>
Using jQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('.ClickCheck').click(function()
{
var ButtonID = $(this).attr('id');
$('#Clicked').val(ButtonID);
});
});
</script>
Then you can retrieve the value of the button clicked in the "Clicked" post variable