CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3
ganesh kaspate
ganesh kaspate

Reputation: 2685

use images as a icon in the input box

enter image description hereI have tried different ways for this but none of them were working for me so I am asking this question.

I have a images enter image description here

I do have the following form 

<div className="login-form">
  <form className="form-horizontal" id="loginForm">
    <div className="form-group" id="username-div">
      <input type="email" className="form-control usertext" id="username" placeholder="Email" />
    </div>
</div>
</div>

I tried using the position absolute as well. but not working.

So, How can I resolve this issue ?

Any hint or help will be helpful.

Upvotes: 0

Views: 1006

Answers (4)

Jatin Maheshwari
Jatin Maheshwari

Reputation: 11

You can use Font awesome icons in place holder as and link font awesome cdn to your page using following code

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

then add font awesome icon using its code value(CSS content Value)

<input type="text" name="text" placeholder="&#xf007; " style="font-family:Arial, FontAwesome">

and set font-family to FontAwesome

Upvotes: 0

Ashu
Ashu

Reputation: 2266

You can use fontawesome library for this use:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xf007; Username" style="font-family:Arial, FontAwesome" />

Upvotes: 0

codeVerses
codeVerses

Reputation: 241

You can set background-image of the input element to use your image and then use padding to adjust cursor/placeholder position, Here's sample css:

    input {  
     background-image:url(https://i.sstatic.net/KNLAq.png);
     background-repeat: no-repeat;
     background-size: contain;
     padding-left:20px;
    }

Upvotes: 1

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

There are several ways you can achieve this, one is to use absolute positioning and put the icon inside the input, but I prefer this way:

.custom-input {
  background-color: white;
  border: 2px solid #ededed;
  padding: 6px;
  width: 215px;
  border-radius: 3px;
}

.custom-input>* {
  vertical-align: middle;
}

.custom-input img {
  width: 25px;
  height: 25px;
  display: inline-block;
}

.custom-input input {
  border: none;
  height: 40px;
  display: inline-block;
  outline: none;
  margin-left: 6px;
}
<div class="custom-input">
  <img src="https://i.sstatic.net/KNLAq.png" alt="user-icon" />
  <input type="text" placeholder="username" />
</div>

But, please note that it's not the recommended way, and it's better to use font-icons for this case. There are already lots of beautiful, and elegant font icons for this case.

Upvotes: 1

Related Questions