Font-awesome input type submit

Question

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    lt input type  submit  id  image-button  gt Text lt  input gt     which I took from HTML  How to make a submit button with text   image in it   with font-awesome

User · Answer

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/

User · Answer

use button type  submit  instead of input   lt button type  submit  class  btn btn-success  gt       lt i class  fa fa-arrow-circle-right fa-lg  gt  lt  i gt  Next  lt  button gt    for Font Awesome 3 2 0 use   lt button type  submit  class  btn btn-success  gt       lt i class  icon-circle-arrow-right icon-large  gt  lt  i gt  Next  lt  button gt

User · Answer

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  lt button gt  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   lt span gt  lt input type  submit  value  Send  class  btn btn-default    gt  lt  span gt    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

User · Answer

HTML Since  lt input gt  element displays only value of value attribute  we have to manipulate only it   lt input type  quot submit quot  class  quot btn fa-input quot  value  quot  amp  xf043  Input quot  gt   I m using  amp  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

User · Answer

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    lt button class  btn btn-link btn-xs  type  submit  name  action  value  delete  gt       lt i class  fa fa-times text-danger  gt  lt  i gt   lt  button gt

User · Answer

Also possible like this    lt button type  submit  class  icon-search icon-large  gt  lt  button gt

User · Answer

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    lt input type  hidden  id  Clicked  name  Clicked  value      gt   lt button type  submit  class  btn btn-success ClickCheck  id  Create  gt   lt i class  fa fa-file-pdf-o  gt  Create Bill lt  i gt  lt  button gt   lt button type  submit  class  btn btn-success ClickCheck  id  Reset  gt   lt i class  fa fa-times  gt  Reset lt  i gt  lt  button gt   lt button type  submit  class  btn btn-success ClickCheck  id  StoreData  gt   lt i class  fa fa-archive  gt  Save lt  i gt  lt  button gt    Using jQuery    lt script type  text javascript  gt        document  ready function                     ClickCheck   click function                         var ButtonID     this  attr  id                    Clicked   val ButtonID                        lt  script gt    Then you can retrieve the value of the button clicked in the  Clicked  post variable

[twitter-bootstrap] Font-awesome, input type 'submit'

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-rails

Examples related to font-awesome