占位符中的ASP.NET MVC5字体

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

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

---

谢谢

这应该适合您：

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

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

请尝试以下操作：

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

。登录输入：：-webkit输入占位符：：在{font-family:fontAwesome；内容：'\f007'；颜色：#69f}之前

---

对于Font Aowesome 5，我发现我需要稍微更新Ashley的答案，方法是删除内联样式并将fas（Font Aowesome solid）类（或图标中的任何一个）添加到输入中，如下所示：

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

也就是说，我还没有弄清楚如何使用这种方法来更改文本的字体样式，而占位符文本的衬线字体很重

更新： 要在文本输入中包含一个很棒的字体图标，并使占位符字体与文档流的其他部分保持相同的样式（或其他样式），需要一种完全不同的方法，但我发现一种我认为不太糟糕的方法（它仍然有些基本）。为此，我像往常一样，在文本输入前面单独的

元素中放置了font-awesome图标，但随后将其绝对定位在文本输入中（因此它不会中断文档流）

HTML/Razor:

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

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

}

.icon {
    text-indent: 20px;
}

这种方法有一个我并不介意的警告（事实上，我更多地将其视为一种好处）。图标现在不会随着文本的输入而消失，而是停留在左侧（我觉得这样可以使输入内容在包含文本后变得不那么模棱两可，这在我看来是件好事）

---

没有尝试这种方法，因为Ashley Lee给出的答案代码更少。仍然感谢您的建议：）为什么要使用

HtmlDecode

往返？为什么不直接

占位符=“\uf007用户名或电子邮件”

？顺便说一句，感谢@GSerg提供关于字符转义与Html解码的技巧，因为它更干净/更简单：）

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

}

.icon {
    text-indent: 20px;
}