Font Awesome Icon Inside Text Input Element

Question

I am trying to insert a user icon in the username input field.

I tried one of the solutions from similar questions, knowing that the background-image property will not work, since the Awesome Font is a font.

Below is my approach and I cannot 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 a font face declared in the standard awesome css font, so I was not sure if adding the font family above was correct.

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

Answer 1

You're right. : before and: after pseudo-content is not intended to work with replaced content, such as img and input elements. Adding a wrapper element and declaring a font family is one option, as is using a background image. Or maybe HTML5 text placeholder fits your needs:

 <input name="username" placeholder="&#61447;"> 

Browsers that do not support the placeholder attribute simply ignore it.

UPDATE

The "before" content selector selects the input: input[type="text"]:before . You must choose a wrapper: .wrapper:before . See http://jsfiddle.net/allcaps/gA4rx/ . I also added a placeholder clause 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="&#61447; Username"></p> 

Back off

Font Awesome uses the Unicode Private Use Area (PUA) to store icons. Other characters are missing and return to the default browser. It should be just like any other input. If you are defining a font for input elements, then provide the same font as the replacement font for situations where we use the icon. Like this:

 input { font-family: 'FontAwesome', YourFont; } 

Answer 2

Exit:

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)

Exit:

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> 

Answer 3

You can use a wrapper. Inside the wrapper, add a stylish font i and an input element.

 <div class="wrapper"> <i class="fa fa-icon"></i> <input type="button"> </div> 

then set the position of the wrapper relative to:

 .wrapper { position: relative; } 

and then set the position of the i element to absolute and set the right place for it:

 i.fa-icon { position: absolute; top: 10px; left: 50px; } 

(This is a hack, I know, but he is doing his job.)

Answer 4

This answer will work for you if you need the following conditions (none of the current answers matched these conditions):

• The icon is inside the text box
• The icon should not disappear when text is entered in the input, and the entered text goes to the right of the icon
• Clicking on the icon should insert the main input into focus.

I believe that 3 is the minimum number of HTML elements that satisfy these conditions:

 .input-icon{ position: absolute; left: 3px; top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */ } input{ padding-left: 17px; } .input-wrapper{ position: relative; } 

 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> <div class="input-wrapper"> <input id="stuff"> <label for="stuff" class="fa fa-user input-icon"></label> </div> 

Answer 5

No need to code much ... just follow these steps:

 <input id="input_search" type="text" class="fa" placeholder="&#xf002 Search"> 

You can find Unicode ( fontawesome ) links here ...

FontAwesome Unicode for Icons

Answer 6

After reading various versions of this question and searching around, I found a pretty clean solution without js. This is similar to @allcaps solution, but avoids the problem of changing the input font compared to the main font of the document.

Use the ::input-placeholder attribute to define the style of the placeholder text. This allows the icon font to be used as a placeholder font, and text (or another font) as the actual input text. Currently, you need to specify vendor specific selectors.

This works well if you do not need a combination of icon and text in the input element. If you do this, then you will have to come to terms with the fact that the text placeholder is the default browser font (normal with serifs in my language) for words.

for example
HTML

 <p class="wrapper"> <input class="icon" type="text" placeholder="&#61442;" /> </p> 

CSS

 .wrapper { font-family:'arial', sans-serif; } input.icon::-webkit-input-placeholder { font-family:'FontAwesome'; } 

Violin with browser selector prefix: http://jsfiddle.net/gA4rx/78/

Note that you must define each browser-specific selector as a separate rule. If you combine them, the browser will ignore this.

Answer 7

I did it like this:

  form i { left: -25px; top: 23px; border: none; position: relative; padding: 0; margin: 0; float: left; color: #29a038; } 

 <form> <i class="fa fa-link"></i> <div class="form-group string optional profile_website"> <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website"> </div> <i class="fa fa-facebook"></i> <div class="form-group url optional profile_facebook_url"> <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url"> </div> <i class="fa fa-twitter"></i> <div class="form-group url optional profile_twitter_url"> <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url"> </div> <i class="fa fa-instagram"></i> <div class="form-group url optional profile_instagram_url"> <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url"> </div> <input type="submit" name="commit" value="Add profile"> </form> 

The result is as follows:

Side note

Please note that I am using Ruby on Rails, so the 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 

Answer 8

For me, an easy way to have an “inside” icon for text input without trying to use pseudo-elements with an amazing Unicode font, etc., Is to have text input and an icon inside the wrapper element that we will put relatively, and then put and search input, and font.

The same thing we do with background images and text we would do here. I feel this is also good for beginners, since css positioning is something a beginner needs to learn at the beginning of his coding path, 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; } 

Answer 9

Building sentences allcaps. 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"; } 

Answer 10

Make an interactive focus icon 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 any icon you like inside the <i> tag from the Awesome font library and get the results.

Answer 11

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> 

Answer 12

 <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> 

Answer 13

 ::-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"> 

Answer 14

 .input-icon{ position: absolute; left: 3px; top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */ } input{ padding-left: 17px; } .input-wrapper{ position: relative; } 

 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> <div class="input-wrapper"> <input id="stuff"> <label for="stuff" class="fa fa-user input-icon"></label> </div> 

Answer 15

I tried the material below and it really works well HTML

 input.hai { width: 450px; padding-left: 25px; margin: 15px; height: 25px; background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ; background-size: 20px 20px; background-repeat: no-repeat; background-position: left; background-color: grey; } 

 <div > <input class="hai" placeholder="Search term"> </div> 

Answer 16

To work with unicode or fontawesome, you must add span with class , as shown 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; } 

Answer 17

 <!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>