ASP.NET MVC5 Font-awesome in placeholder

Question

我正在尝试在登录页面的占位符中添加一个很棒的字体图标。这是我到目前为止所拥有的。我不知道如何在文本框 inside （作为占位符）

中获得一个很棒的字体图标

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

我找到了如何添加占位符here 的问题，但没有找到如何添加图标。

谢谢！

Answer 1

对于 Font Awesome 5，我发现我需要稍微更新 Ashley 的答案，方法是删除内联样式并将 fas（Font Awesome solid）类（或您的图标具有的任何一个）添加到输入像这样：

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

话虽如此，我还没有弄清楚如何使用这种方法更改文本的字体样式，并且我被占位符文本的粗衬线字体困住了。

更新： 要在文本输入中包含一个很棒的字体图标并保持占位符字体与文档流的其余部分相同的样式（或其他样式）需要一种完全不同的方法，但我发现一个我认为还不错的方法（它仍然有些基本）。为此，我像往常一样将字体真棒图标放在自己单独的 <i></i> 元素中的文本输入前面，但随后将其绝对定位在文本输入中（因此它不会中断文档流）。

HTML/Razor：

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

这是 CSS/样式：我在 <i></i> 标记中添加了一个类 (.placeholder) 用于定位，这使图标成为绝对的，同时垂直居中并从左侧移动一点（注意：您可能需要根据您的文本输入大小或多或少地调整您的顶部和左侧）。我还在文本输入中添加了另一个类 (.icon)，它在文本输入的前面/内部添加了文本缩进，以将占位符文本推出与图标重叠。这使两者分开，以便占位符文本可以设置为您想要的任何字体（或保留您已经使用的默认字体）。

CSS：

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

}

.icon {
    text-indent: 20px;
}

我不介意这种方法有一个警告（实际上我认为它更多是一种好处）。现在图标在输入文本时不会消失，而是停留在左侧（我觉得这使得输入在输入文本后不那么模糊，我认为这是一件好事）。

Answer 2

尝试以下方法：

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

Answer 3

这应该适合你：

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

需要使用字体真棒代码并添加字体系列，以及HtmlDecode代码。