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;