0

I have a problem. I want to create a input text field with icons inside of the code. I want to have my icons inside of the input text field. Unfortunately my CSS style didn't work. With others code the icons disappeared. I hope you can help me. Thank you in advance. Please see below for my code.

HTML 

<div class="col-md-6 login-form">
            <h3>Los gehts</h3>
            <div class="form_login">

                <div class="form-group">
                    <input type="text" id="email_field" placeholder="Email *">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    </span>
                </div>

                <div class="form-group">
                    <input type="password" id="password_field" placeholder="Passwort *">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    </span>
                </div>

                <div class="form-group">
                    <button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
                </div>
                <!-- 
                <div class="form-group">
                    <a href="#" class="ForgetPwd">Forget Password?</a>
                </div> -->
            </div>
        </div>

CSS

.login-container {
  margin-top: 5%;
  margin-bottom: 5%;
  text-align: center;
  margin: auto;
  padding-bottom: 5%;
}
.login-form {
  padding: 5%;
  text-align: center;
  margin: auto;
}
.login-form h3 {
  text-align: center;
  color: #333;
}

.login-container form {
  padding: 10%;
  text-align: center;
  display: inline-block;
  position: relative;
  width: 100%;
  z-index: 1;
  margin-bottom: 10px;
}
.btnSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  border: none;
  cursor: pointer;
}


.btnLogout {
  margin-top: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  color: #fff;
  background-color: #0062cc;
  text-align: center;
  display: inline-block;
  border: none;
  margin-bottom: 10px;
}

.btnLogout:hover {
  background-color: #0575ec;
}

.login-form .btnSubmit {
  font-weight: 600;
  color: #fff;
  background-color: #0062cc;
}

.login-form .ForgetPwd {
  color: #0062cc;
  font-weight: 600;
  text-decoration: none;
}

.loggedin-div {
  text-align: center;
  padding-bottom: 5%;
}
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133

2 Answers2

0

You need to create a div with border that imitate a input border. Then, you need to create the text input at the left and add this code: <input type="image" src="yourimagefile.jpg">

I hope I help you.

Felipe Garcia
  • 42
  • 10
0

If you want something to float somewhere else, you can use a combination of position:relative; and top/left with CSS. For instance, let's add an id to that login button and make it our icon...

<div class="form-group" id="submit">
    <button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>

Then some styling...

#submit {
  top:-21px;
  left:228px;
  position:relative;
  width:100px;
}

And what we get, then, is an icon floating over the input field. Working Demo.

Works for me. Before:

After:

Here's an example with the blank <i> elements (converted to <img> so we could see something, as they had no href): Working Demo.

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
  • Thank you very much for your answer! :) I would like to add the icons like the user icon fa fa-user to the input and not the login button :). I hope my anwer will help you. please let me know! –  May 24 '20 at 19:56
  • @Marcel.david1 : Hey, excellent, I've updated my answer above and have a new demo, https://jsbin.com/qunixur/edit?html,css,output . Note: You had no `href`/`src` in your `` tags, so they were invisible. To test this, I made them completely black, so they would be visible. Not intended to be part of the solution. – HoldOffHunger May 24 '20 at 20:23
  • Sigh, and this user deleted their account. So, I hope my answer helps someone! – HoldOffHunger May 25 '20 at 02:59