Font-awesome, input type 'submit'

twitter-bootstrap twitter-bootstrap-rails font-awesome
denis.peplin picture denis.peplin · Jul 27, 2012 · Viewed 253.3k times · Source

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 HTML: How to make a submit button with text + image in it?) with font-awesome?

Answer

Joao Leme picture Joao Leme · Aug 28, 2012

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>

Related questions

How to integrate a Wrap Bootstrap theme into an Rails application?

I have bought a twitter bootstrap theme from wrapbootstrap. I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application. I am new to this and I have no …

Read More
How to reuse a class in sass without using a mixin?

I want all my anchors in my application look like .btn (Twitter Bootstrap class), is there a way to make this? I did a{ @include btn; } but it does not work because btn should be a mixin, and it's a …

Read More
How can I make Twitter Bootstrap modal animation faster?

I really like the Twitter Bootstrap modal, but showing it with the animation is a bit slow. I'd say around 500ms. Is there a way to make it faster? I looked in bootstrap-modal.js but couldn't find anything compelling that …

Read More