229

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?

8 Answers 8

385

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>
5
  • Awesome! Works as expected. Still need some steps to adapt this for simple_form or create a helper, but it is relatively easy. Aug 28, 2012 at 6:23
  • 23
    Also be aware of the differences between <button type=submit> and <input type=submit>: stackoverflow.com/questions/3543615/…
    – Pavlo
    Aug 28, 2012 at 9:07
  • @stanislav-mayorov it does work. If you are using current version 4.7 you have to adjust from 3.2.0 (from 2012). Try the updated answer.
    – Joao Leme
    Sep 29, 2017 at 23:01
  • @JoaoLeme does <button type="submit"> work to any form?
    – Ryuujo
    Dec 4, 2018 at 9:52
  • This doesn't work when I want to avoid reloading the page.
    – Salvioner
    Mar 28, 2019 at 11:28
100

HTML

Since <input> element displays only value of value attribute, we have to manipulate only it:

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

I'm using &#xf043; 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.

6
  • 1
    Thank for answer, it works, but I can't actually use this approach, because font affects entire value's text. I'm also use 'icon-large' in other buttons... For those who will try this, font codes is here: github.com/FortAwesome/Font-Awesome/blob/master/sass/… Jul 30, 2012 at 5:05
  • I think that's all we can do here. Personally I suggest you to leave <input>s w/o an icon.
    – Pavlo
    Jul 30, 2012 at 10:51
  • worked fine, I have to use <input type="submit"> because I have two submit in one form
    – MoniR
    Jun 20, 2016 at 4:40
  • this is better than adding "fa" to element' class, since "fa" will change the element's height.
    – Siwei
    Jan 10, 2018 at 8:20
  • Also you may use inline style font-family property to use it in any HTML elements that has text content.
    – SaidbakR
    Mar 2, 2018 at 11:43
57

You can use font awesome utf cheatsheet

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

here is the link for the cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

5
  • 2
    This made my day! Thanks.. For any other users, please note the sentence: copy and paste the icons (not the unicode) directly from this page into your design i.e. copy the actual icon and it will work
    – PSR
    Dec 19, 2014 at 13:59
  • 18
    <input type="button" class="fa" value="&#xf011; Login"/> without bootstrap use fa class to get it working
    – StackHola
    Mar 25, 2015 at 10:24
  • 3
    If you're trying to set this with javascript or jQuery, use the unicode variation: $("input.search").addClass("fa").val("\uf011 Login"); Mar 27, 2015 at 5:51
  • 2
    Even with Bootstrap I need to add class="fa" to get this working. Jan 7, 2016 at 6:49
  • This produces just a rectangle for me. Shame
    – AlphaX
    Apr 5, 2021 at 10:37
13

Well, technically it's not possible to get :before and :after pseudo elements work on input elements

From W3C:

12.1 The :before and :after pseudo-elements

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.


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;
}

Demo

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;

1
  • 1
    While a very cool solution it has one big downside: pointer-events: none is not supported by IE<11 (caniuse.com/#feat=pointer-events). The reason being that pointer-events property was made for SVG elements (vector graphics) and it's not technically in the W3C specs for other HTML elements (yet, wiki.csswg.org/spec/css4-ui#pointer-events) even though all modern browsers except for IE<11 support it. Oct 9, 2014 at 8:42
9

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>
4

Also possible like this

<button type="submit" class="icon-search icon-large"></button>
2

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

0

Copy the actual symbol into the submit value attributes

<input type="submit" value="Send ➢ ➔ " class="btn btn-default" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.