I am trying to insert a user icon inside username input field.
I've tried one of the solution from the similar question
knowing that background-image property won't work since Font Awesome is a font.
The following is my approach and I can't get the icon display.
.wrapper input[type="text"] {
position: relative;
}
.wrapper input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: -5px;
content: "\f007";
}
I have font face declared in the default font awesome css so I wasn't sure if adding font-family above was the right approach.
@font-face {
font-family: 'FontAwesome';
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
This question is related to
html
css
fonts
font-awesome
The answer is
Make clickable icon to focus inside the text input element.
CSS
.myClass {
font-size:20px;
position:absolute; top:10px; left:10px;
}
HTML
<div>
<label style="position:relative;">
<i class="myClass fa fa-address-book-o"></i>
<input class="w3-input" type="text" style="padding-left:40px;">
</label>
</div>
Just add whichever icon you like inside the <i> tag, from Font Awesome library and enjoy the results.
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>
<body>
<div class="inp1">
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>
purely CSS
input[type=search] {
min-width: 320px;
height: 24px;
border: 1px solid #E6E6E6;
border-radius: 8px;
margin-top: 6px;
background-image: url('/img/search.png');
background-size: 16px;
background-position: 280px;
background-repeat: no-repeat;
}
For me, an easy way to have an icon "within" a text input without having to try to use pseudo-elements with font awesome unicode etc, is to have the text input and the icon within a wrapper element which we will position relative, and then position both the search input and the font awesome icon absolute.
The same way we do with background images and text, we would do here. I feel this is good for beginners as well, as css positioning is something a beginner should learn in the beginning of their coding journey, so the code is easy to understand and reuse.
<div class="searchbar-wrapper">
<i class="fa fa-search searchbar-i" aria-hidden="true"></i>
<input class="searchbar-input" type="search" placeholder="Search...">
</div>
.searchbar-wrapper{
position:relative;
}
.searchbar-i{
position:absolute;
top: 50%;
transform: translateY(-50%);
padding: 0 .5rem;
}
.searchbar-input{
padding-left: 2rem;
}
.input-icon{_x000D_
position: absolute;_x000D_
left: 3px;_x000D_
top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */_x000D_
}_x000D_
input{_x000D_
padding-left: 17px;_x000D_
}_x000D_
.input-wrapper{_x000D_
position: relative;_x000D_
}<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>_x000D_
<div class="input-wrapper">_x000D_
<input id="stuff">_x000D_
<label for="stuff" class="fa fa-user input-icon"></label>_x000D_
</div>Output:
HTML:
<input name="txtName" id="txtName">
<span class="fa fa-info-circle errspan"></span>
CSS:
<style type="text/css">
.errspan {
float: right;
margin-right: 6px;
margin-top: -20px;
position: relative;
z-index: 2;
color: red;
}
</style>
(Or)
Output:
HTML:
<div class="input-wrapper">
<input type="text" />
</div>
CSS:
<style type="text/css">
.input-wrapper {
display:inline-block;
position: relative
}
.input-wrapper:after {
font-family: 'FontAwesome';
content: '\f274';
position: absolute;
right: 6px;
}
</style>
I tried the below stuff and it really works well HTML
input.hai {_x000D_
width: 450px;_x000D_
padding-left: 25px;_x000D_
margin: 15px;_x000D_
height: 25px;_x000D_
background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;_x000D_
background-size: 20px 20px;_x000D_
background-repeat: no-repeat;_x000D_
background-position: left;_x000D_
background-color: grey;_x000D_
}<div >_x000D_
_x000D_
<input class="hai" placeholder="Search term">_x000D_
_x000D_
</div>My Solution to add a font-awesome icon inside the input element. Here is a simple code to add icon inside the input element. Just copy the code below and put where you want to add. or if you want to change the icon then just put your icon code in <i> tag.
<style>_x000D_
body {font-family: Arial, Helvetica, sans-serif;}_x000D_
* {box-sizing: border-box;}_x000D_
.soft-codeon {_x000D_
display: -ms-flexbox; /* IE10 */_x000D_
display: flex;_x000D_
width: 50%;_x000D_
margin-bottom: 15px;_x000D_
}_x000D_
_x000D_
.icon {_x000D_
padding: 10px;_x000D_
background: linear-gradient(to right, #ec008c, #fc6767); _x000D_
color: white;_x000D_
min-width: 20px;_x000D_
text-align: center;_x000D_
}_x000D_
.soft-field {_x000D_
width: 100%;_x000D_
padding: 10px;_x000D_
outline: none;_x000D_
border:2px solid #fc6767;_x000D_
}_x000D_
.soft-field:focus {_x000D_
border: 2px solid #ec008c;_x000D_
}_x000D_
</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">_x000D_
<div class="soft-codeon">_x000D_
<i class="fa fa-user icon"></i>_x000D_
<input class="soft-field" type="text" placeholder="Username" name="usrnm">_x000D_
</div>_x000D_
<div class="soft-codeon">_x000D_
<i class="fa fa-envelope icon"></i>_x000D_
<input class="soft-field" type="text" placeholder="Email" name="email">_x000D_
</div>::-webkit-search-cancel-button {
height: 10px;
width: 10px;
display: inline-block;
/*background-color: #0e1d3033;*/
content: "&#f00d;";
font-family: FontAwesome;
font-weight: 900;
-webkit-appearance: searchfield-cancel-button !important;
}
input#searchInput {
-webkit-appearance: searchfield !important;
}
<input data-type="search" type="search" id="searchInput" class="form-control">
<!doctype html>
<html>
<head>
## Heading ##
<meta charset="utf-8">
<title>
Untitled Document
</title>
</head>
<style>
li {
display: block;
width: auto;
}
ul li> ul li {
float: left;
}
ul li> ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
margin-left: 148px;
display: inline;
margin-top: -52px;
}
a {
background: #f2f2ea;
display: block;
/*padding:10px 5px;
*/
width: 186px;
height: 50px;
border: solid 2px #c2c2c2;
border-bottom: none;
text-decoration: none;
}
li:hover >a {
background: #ffffff;
}
ul li>li:hover {
margin: 12px auto 0px auto;
padding-top: 10px;
width: 0;
height: 0;
border-top: 8px solid #c2c2c2;
}
.bottom {
border-bottom: solid 2px #c2c2c2;
}
.sub_m {
border-bottom: solid 2px #c2c2c2;
}
.sub_m2 {
border-left: none;
border-right: none;
border-bottom: solid 2px #c2c2c2;
}
li.selected {
background: #6D0070;
}
#menu_content {
/*float:left;
*/
}
.ca-main {
padding-top: 18px;
margin: 0;
color: #34495e;
font-size: 18px;
}
.ca-sub {
padding-top: 18px;
margin: 0px 20px;
color: #34495e;
font-size: 18px;
}
.submenu a {
width: auto;
}
h2 {
text-align: center;
}
</style>
<body>
<ul>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 1
</h2>
</div>
</a>
<ul class="submenu" >
<li>
<a href="#" class="sub_m">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_1
</h2>
</div>
</a>
</li>
<li>
<a href="#" class="sub_m2">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_2
</h2>
</div>
</a>
</li>
<li >
<a href="#" class="sub_m">
<div id="menu_content">
<h2 class="ca-sub">
Item 1_3
</h2>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 2
</h2>
</div>
</a>
</li>
<li>
<a href="#">
<div id="menu_content">
<h2 class="ca-main">
Item 3
</h2>
</div>
</a>
</li>
<li>
<a href="#" class="bottom">
<div id="menu_content">
<h2 class="ca-main">
Item 4
</h2>
</div>
</a>
</li>
</ul>
</body>
</html>
This answer will work for you if you need the following conditions met (none of the current answers met these conditions):
- The icon is inside the text box
- The icon shouldn't disappear when text is entered into the input, and text entered goes to the right of the icon
- Clicking the icon should bring the underlying input into focus
I believe that 3 is the minimal number of HTML elements to satisfy these conditions:
.input-icon{_x000D_
position: absolute;_x000D_
left: 3px;_x000D_
top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */_x000D_
}_x000D_
input{_x000D_
padding-left: 17px;_x000D_
}_x000D_
.input-wrapper{_x000D_
position: relative;_x000D_
}<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>_x000D_
<div class="input-wrapper">_x000D_
<input id="stuff">_x000D_
<label for="stuff" class="fa fa-user input-icon"></label>_x000D_
</div>I found the easiest way using bootstrap 4.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span></div>
<input type="text"/>
</div>
Sometime the icon won't show up due to the Font Awesome version. For version 5, the css should be
.dropdown-wrapper::after {
content: "\f078";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #000;
position: absolute;
right: 6px;
top: 10px;
z-index: 1;
width: 10%;
height: 100%;
pointer-events: none;
}
Easy way ,but you need bootstrap
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
</div>
<input type="email" id="senha_nova" placeholder="Email">
</div><!-- input-group -->
Having read various versions of this question and searching around I've come up with quite a clean, js-free, solution. It's similar to @allcaps solution but avoids the issue of the input font being changed away from the main document font.
Use the ::input-placeholder attribute to specifically style the placeholder text. This allows you to use your icon font as the placeholder font and your body (or other font) as the actual input text. Currently you need to specify vendor-specific selectors.
This works well as long as you don't need a combination of icon and text in your input element. If you do then you'll need to put up with the placeholder text being default browser font (plain serif on mine) for words.
E.g.
HTML
<p class="wrapper">
<input class="icon" type="text" placeholder="" />
</p>
CSS
.wrapper {
font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
font-family:'FontAwesome';
}
Fiddle with browser prefixed selectors: http://jsfiddle.net/gA4rx/78/
Note that you need to define each browser-specific selector as a seperate rule. If you combine them the browser will ignore it.
No need to code a lot... just follow the following steps:
<input id="input_search" type="text" class="fa" placeholder=" Search">
you can find the links to the Unicode(fontawesome) here...
Building on allcaps suggestion. Here is the font-awesome background method with the least amount of HTML:
<div class="wrapper"><input></div>
.wrapper {
position: relative;
}
input { padding-left: 20px; }
.wrapper:before {
font-family: 'FontAwesome';
position: absolute;
top: 2px;
left: 3px;
content: "\f007";
}
The below simple solution worked for me.
<input type="text" class="fa" placeholder=" Search">
Use this filter for implement search: https://www.npmjs.com/package/ng2-search-filter
To work this with unicode or fontawesome, you should add a span with class like below:
In HTML:
<span class="button1 search"></span>
<input name="username">
In CSS:
.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}
My solution was to have a relative container around the input for holding the icon. That outer container has a ::after with the desired icon, positioned absolute within the container.
HTML:
<div class="button__outer">
<input type="submit" class="button" value="Send"/>
</div>
SASS code:
.button {
display: inline-block;
width: auto;
height: 60px;
line-height: 60px;
}
.button__outer {
position: relative;
display: inline-block;
width: auto;
&::after {
position: absolute;
right: 0;
top: 0;
height: 60px;
line-height: 60px;
width: 60px;
font-family: 'FontAwesome', sans-serif;
content: "\f054";
color: #fff;
font-size: 27px;
font-weight: 700;
}
}
You could use a wrapper. Inside the wrapper, add the font awesome element i and the input element.
<div class="wrapper">
<i class="fa fa-icon"></i>
<input type="button">
</div>
then set the wrapper's position to relative:
.wrapper { position: relative; }
and then set the i element's position to absolute, and set the correct place for it:
i.fa-icon { position: absolute; top: 10px; left: 50px; }
(It's a hack, I know, but it gets the job done.)
I did achieve this like so
form i {_x000D_
left: -25px;_x000D_
top: 23px;_x000D_
border: none;_x000D_
position: relative;_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
float: left;_x000D_
color: #29a038;_x000D_
}<form>_x000D_
_x000D_
<i class="fa fa-link"></i>_x000D_
_x000D_
<div class="form-group string optional profile_website">_x000D_
<input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">_x000D_
</div>_x000D_
_x000D_
<i class="fa fa-facebook"></i>_x000D_
<div class="form-group url optional profile_facebook_url">_x000D_
<input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">_x000D_
</div>_x000D_
_x000D_
<i class="fa fa-twitter"></i>_x000D_
<div class="form-group url optional profile_twitter_url">_x000D_
<input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">_x000D_
</div>_x000D_
_x000D_
<i class="fa fa-instagram"></i>_x000D_
<div class="form-group url optional profile_instagram_url">_x000D_
<input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">_x000D_
</div>_x000D_
_x000D_
<input type="submit" name="commit" value="Add profile">_x000D_
</form>The result looks like this:
Side note
Please note that I am using Ruby on Rails so my resulting code looks a bit blown up. The view code in slim is actually very concise:
i.fa.fa-link
= f.input :website, label: false
i.fa.fa-facebook
= f.input :facebook_url, label: false
i.fa.fa-twitter
= f.input :twitter_url, label: false
i.fa.fa-instagram
= f.input :instagram_url, label: false
Source: Stackoverflow.com