CODEWITHSUNDEEP
htmlcssfontsfont-awesome
Albuquerque Web Design
Albuquerque Web Design

Reputation: 421

FontAwesome Icon Inside Input button using :after

I am trying to have a calendar icon to show on a submit button. Note: i cannot insert a tag or anything similar- I simply want to format the button from css. So far nothing shows.

the HTML code is:

<p class="mphb_sc_search-submit-button-wrapper">
    <input type="submit" class="button" value="Search">
</p>

The css code is: 

.mphb_sc_search-submit-button-wrapper {
    display:inline-block;
    position: relative
}

.mphb_sc_search-submit-button-wrapper:after {
    content: '\f274';
    position: absolute;
    right: 6px;
    font-size: 18px;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

` UPDATE: I have to change the color to white so it now shows.

enter image description here

I was looking for something like this:

enter image description here

Upvotes: 0

Views: 766

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

I think you forgot the font awesome file

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css 

.mphb_sc_search-submit-button-wrapper {
    display:inline-block;
    position: relative;

}
.mphb_sc_search-submit-button-wrapper input{
  padding-right:30px;
}
.mphb_sc_search-submit-button-wrapper:after {
    content: '\f274';
    position: absolute;
    right: 6px;
    top:3px;
    font-size: 18px;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

https://jsfiddle.net/9jngfrm5/

Upvotes: 1

Related Questions