Put icon inside input element in a form
The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input>
element. Then, in order to push the cursor over, it uses padding-left
.
In other words, they have these two CSS rules:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
How to insert icon inside input tag
Well you can use position absolute to position the icon over the input.
You might need to change the top
value a little bit and the padding-right
value. Check the comment inside the snippet below
.input-group {
position:relative;
display:inline-block;
}
.input-group-text {
position: absolute;
right:0;
top: 0;
}
input {
padding-right: 20px; /* = icon width if you don't want the password to go under the icon */
}
<div class="input-group">
<input id="password" type="password" class="form-login" />
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-eye" id="show_eye">icon</i>
</span>
</div>
</div>
Font Awesome icon inside text input element
You're right. :before and :after pseudo content is not intended to work on replaced content like img
and input
elements. Adding a wrapping element and declare a font-family is one of the possibilities, as is using a background image. Or maybe a html5 placeholder text fits your needs:
<input name="username" placeholder="">
Browsers that don’t support the placeholder attribute will simply ignore it.
UPDATE
The before content selector selects the input: input[type="text"]:before
. You should select the wrapper: .wrapper:before
. See http://jsfiddle.net/allcaps/gA4rx/ .
I also added the placeholder suggestion where the wrapper is redundant.
.wrapper input[type="text"] {
position: relative;
}
input { font-family: 'FontAwesome'; } /* This is for the placeholder */
.wrapper:before {
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
<p class="wrapper"><input placeholder=" Username"></p>
How to put icon inside an input box
A little bit of CSS should do the trick here.
Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.
CSS:
.test {
position: relative;
}
.test .fas.fa-check {
position: absolute;
top: 0;
right: 0;
}
UPDATE
If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.
HTML/CSS to put icon inside password input field
1st you need to wrap
input
andicon
inside same container2nd style the container not the input itself .. border , flex... for container and remove outline , background , border... from input
With flex
,flex-direction: row
,align-items
and simple change to the html structure it can be something like this
.join-login-form {
background-color: #202027;
width: 50vw;
max-width: 50%;
padding: 2rem 4rem;
border-radius: 20px;
}
.input-group {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
}
.input-group label{
color : #fff;
font-family : tahoma;
}
.input-group span{
color : #888;
font-family : tahoma;
font-size: 11px;
}
.input-icon-container{
display: flex;
flex-direction: row;
border: 1px solid #374669;
border-radius: 5px;
background : #fff;
align-items : center;
overflow: hidden;
}
.input-icon-container.error{
border: 1px solid red;
background : #fdd3d3;
}
.input-icon-container input {
outline: none;
border: none;
background: none;
font-size: 1em;
padding: .5em;
color: inherit;
flex : auto 1 1;
width : 100%;
background : none;
background-color : transperant;
}
.input-icon-container .fa{
padding : 10px;
}
.fa.fa-user{
background : #374669;
color: #fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form class="join-login-form">
<div class="input-group" name="username">
<label>UserName</label>
<div class="input-icon-container">
<input type="email"/>
<i class="fa fa-check"></i>
</div>
<span>* Between 3 and 15 chars</span>
</div>
<div class="input-group" name="UserName">
<label>UserName Left Icon</label>
<div class="input-icon-container">
<i class="fa fa-user"></i>
<input type="email"/>
<i class="fa fa-check"></i>
</div>
<span>* Between 3 and 15 chars</span>
</div>
<div class="input-group" name="UserName">
<label>UserName Error</label>
<div class="input-icon-container error">
<input type="email"/>
<i class="fa fa-times"></i>
</div>
<span>* Between 3 and 15 chars</span>
</div>
<div class="input-group" name="password">
<label>Password</label>
<div class="input-icon-container">
<input type="password"/>
<i class="fa fa-eye-slash"></i>
</div>
<span>* Between 4 and 30 chars</span>
</div>
</form>
How to add icon inside the input field with the placeholder text
If you are using bootstrap4/bootstrap5 you can do easily
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<div class="container">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-search"></i>
</div>
</div>
<input type="text" placeholder="search here" class="form-control" name="search" />
</div>
</div>
Put two icons inside of an input field
The easiest way is to not put the icons in the input field, but style a container with a a prefix, the input and suffix. Remove all stylings from the input and then style the container like an input.
<div class="input">
<span class="prefix"><i>YOUR ICON</i></span>
<input />
<span class="suffix"><i>YOUR ICON</i></span>
</div>
<style>
.input {
display: flex;
gap: 1rem;
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5rem 0;
}
input {
all: unset;
}
</style>
Here is a small codepen I created:
https://codepen.io/webfussel/pen/rNYPzyX
How to put Show / Hide Icon inside input field
I would suggest using absolute positioning to align the icon.
Wrap the two inputs (password & checkbox) in a div.
<div id="password-input-toggle">
<input id="your-password-field"/>
<input type="checkbox" id="your-toggle-checkbox"/>
</div>
How to add font awesome icon inside input field?
So normally you add FontAwesome Icons either using the class structure such as:
fas fa-exclamation-circle
or you would use the content css style.
content: "\f06a";
The class system relies on the :before pseudo class, which does not work on self-closing HTML elements such as an input or a br tag
The content style also does not work on an input element
What I would do in something like this would be to wrap the input field in a container, add a FontAwesome element as the :after on the element.
<i class="fas fa-exclamation-circle"></i>
and then style my container to look like the input field, while removing some styles from the input field itself such as background color and border. You'll then need to work out the best way to have the FontAwesome icon side beside the form field.
Field HTML:
<form>
<label for="name">Name</label>
<div class="formField">
<input class="valid" type="text" name="name" />
</div>
</form>
Sample Styles
.formField{
border-color: #28a745;
padding-right: 30px;
position: relative;
}
input.valid{
background-color: transparent;
border: 0;
margin-right: 50px;
}
.formField:after{
position: absolute;
transform: translate(0,-50%);
right: 0;
top: 50%;
font-family: "Font Awesome 5 Pro";
content: "\f06a";
}
Depending on what FontAwesome license you have, you might need to change the font-family style to match what you need it to be.
You may need to adjust some of the styles to meet your needs, but this should give you something to start with.
JSFiddle:
https://jsfiddle.net/8jz9ngpu/
Related Topics
Absolutely Positioned Flex Item Is Not Removed from the Normal Flow in Ie11
Make Flex Items Take Content Width, Not Width of Parent Container
Does Form Data Still Transfer If the Input Tag Has No Name
Manually Triggering Form Validation Using Jquery
Change Bootstrap Tooltip Color
How to Assign Multiple Classes to an HTML Container
How to Add 1Px Margin to a Flex Item That Is Flex: 0 0 25%
Should I Put Input Elements Inside a Label Element
Force to Open "Save As..." Popup Open At Text Link Click For Pdf in Html
Onclick on Option Tag Not Working on Ie and Chrome
How to Change Source of ≪Img≫ Tag on Hover