Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font awesome icon and text in input submit button?

Tags:

html

submit

fonts

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?

like image 619
m_73 Avatar asked Feb 02 '15 18:02

m_73


People also ask

How do I add font awesome icon inside input field?

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.


3 Answers

Try

<button type="submit" class="btn btn-default">
                    <i class="fa fa-shopping-cart"></i> Buy Now
                </button>
like image 114
Society43 Avatar answered Oct 13 '22 23:10

Society43


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

like image 2
Christian Smith Avatar answered Oct 13 '22 22:10

Christian Smith


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;
}
like image 1
Dragan Petrovic FSD Avatar answered Oct 13 '22 23:10

Dragan Petrovic FSD