ASP.NET MVC5在占位符中字体很棒

Question

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

中获得字体很棒的图标

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

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

谢谢！

Answer 1

这应该适合你：

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

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

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

对于 Font Awesome 5，我发现我需要通过删除内联样式并在输入中添加 fas（Font Awesome solid）类（或任何您的图标）来稍微更新 Ashley 的答案像这样：

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

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