ASP.NET MVC5 Font-awesome in placeholder

Question

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!

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

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