ASP.NET MVC5 Font-awesome in placeholder

I am trying to add an font-awesome icon to my placeholder for the login page. This is what I have so far. I can’t figure out how to get a font-awesome icon inside the textbox (as placeholder)

@Html.TextBoxFor(m => m.UserName, new { @class = "form-control login-input", placeholder = "Username or Email"})

I found how to add a placeholder here question but not how to add the icon.

Thanks!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This should work for you:

@Html.TextBoxFor(m => m.Email, new { @class = "form-control login-input", placeholder = HttpUtility.HtmlDecode(" Username or Email"), style = "font-family:Arial, FontAwesome" })

Need to use the font awesome code and add the font family, as well as HtmlDecode the code.

Method 2

Try the following:

@Html.TextBoxFor(m => m.UserName, new { @class = "form-control login-input", placeholder = "Username or Email"})

.login-input::-webkit-input-placeholder::before { font-family: fontAwesome; content:'f007  '; color: #69f }

<input class="form-control login-input" placeholder="Username or Email">

Method 3

For Font Awesome 5 I found that I needed to update Ashley’s answer just slightly by removing the inline style and adding the fas (Font awesome solid) class (or whichever your icon has) to the input like so:

@Html.TextBoxFor(m => m.Email, new { @class = "form-control fas", @placeholder = "uf0e0 Email Address" })

That being said, I have not figured out how to change the font style for the text yet using this method and am stuck with a heavy serif font for the placeholder text.

Update:
To include a font awesome icon within the text input and keep the placeholder font the same style as the rest of the document flow (or style it otherwise) required a completely different approach, but I found one that I think is not too bad (it still is somewhat basic). For this I put the font awesome icon in front of the text input in its own separate <i></i> element as usual, but then absolutely positioned it within the text input (so it does not interrupt the document flow).

HTML/Razor:

<i class="fas fa-envelope placeholder"></i>@Html.TextBoxFor(m => m.Email, new { @class = "form-control icon", @placeholder = "Email Address" })

Here is the CSS/Styling: I added one class (.placeholder) to the <i></i> tag for the positioning, which makes the icon absolute along with centering it vertically and moving it in a bit from the left (note: you may need to adjust your top & left more or less depending on your text input size). I also added another class (.icon) to the text-input that adds text-indent in front of / within the text input to push the placeholder text out from overlapping with the icon. This keeps the two separate so that the placeholder text can be styled to whatever font you would like (or keeps the default font you are already using).

CSS:

.placeholder {
    position: absolute;
    color: gray;
    top: 10px;
    left: 25px;

}

.icon {
    text-indent: 20px;
}

There is one caveat to this method that I did not mind (in fact I see it more as a benefit). The icon now will not disappear as the text is entered, but instead stays there on the left (I felt that this made the input less ambiguous once it had text in it, which is a good thing in my opinion).

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0