ASP.NET MVC5 Font-awesome in placeholder

Posted 2023-03-05

【中文标题】ASP.NET MVC5 Font-awesome in placeholder

【英文标题】：

【发布时间】：2015-02-22 01:18:06

【问题描述】：

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

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

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

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

谢谢！

【参考方案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;

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

【讨论】：

顺便感谢@GSerg 关于字符转义与 Html 解码的提示，因为它更干净/更简单:)

【参考方案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">

【讨论】：

没有尝试这种方法，因为 Ashley Lee 的答案是更少的代码。仍然感谢您的建议:)

【参考方案3】：

这应该适合你：

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

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

【讨论】：

为什么要与HtmlDecode 往返？为什么不直接placeholder = "\uf007 Username or Email"？