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');
}
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>