I have a similar problem like here , i want to place font awesome icon into my submit button and also a text, it looks so: http://prntscr.com/608exx
Content of my input submit value is Buy now 
The icon is visible because i set on input field font-family: FontAwesome;
my question is, how can i set on my text inside the button standard font family?
It is as simple as putting Font Awesome icon on any button. The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages, it needs the font-awesome link inside the head section. The font-awesome icon can be placed by using the fa prefix before the icon's name.
Try
<button type="submit" class="btn btn-default">
<i class="fa fa-shopping-cart"></i> Buy Now
</button>
In order to do this whilst retaining the <input>
element, you must put the Font Awesome glyph outside of the <input>
and then simply position it on top.
<span><i class="fas fa-shopping-cart glyph"></i></span>
<input type="button" class="button" value="Basket" />
Then simply add some CSS to make the whole button clickable.
.glyph{
position: relative;
left: 35px;
pointer-events: none; //this makes the glyph clickable as part of the input
}
.button{
width: 100px;
height: 100px;
padding-left: 20px;
}
JSFiddle
It is quite easy to change it only via CSS. Just need to pick up all types of tags attributes.
For example:
for buttons: input, [type="button"], [type="reset"], [type="submit"] for text: input, [type="text"] and etc...
input, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
background-color: #EF2B76;
padding-left: 2rem;
padding-right: 2rem;
cursor: pointer;
color: white;
}
input, [type="text"] {
background-color: white;
padding-left: 2rem;
padding-right: 2rem;
cursor: pointer;
color: white;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With