在mvc5中将图标添加到文本框中

Question

我目前正在尝试在mvc5中的文本框中添加图标。我对asp.net很新，我无法弄清楚如何做到这一点。我通常会使用<i class="fa fa-icon"></i>。

在输入区域内，我有：

@Html.TextboxFor(m=> m.EmailAddress, new {@placeholder = "Email Address"})

非常感谢任何帮助。

Answer 1

如果你在ASP.Net MVC 5中使用bootstrap（默认情况下是新MVC 5应用程序的一部分），那么你可以使用bootstraps类来实现它

<div class="form-group has-success has-feedback"> 
   @Html.TextboxFor(m=> m.EmailAddress, new {@class="form-control" @placeholder = "Email Address"})
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

此代码将显示带有文本框的成功图标。下面是快照。

有关相同外观引导文档here的详细信息。

Answer 2

您在那里使用的Html帮助程序只生成一个html输入字段，并将其与模型的EmailAddress字段绑定。你想要实现的是与ASP.NET或MVC无关;它只是CSS。默认情况下，您的输入字段的id属性为“EmailAddress”。你可以使用一些像：

#EmailAddress{
    background: url(images/some-image.gif) no-repeat scroll 5px 5px;
    padding-left:30px;
}

举一个例子。

或者，您可以使用Html帮助器为输入字段提供类似的类：

@Html.TextboxFor(m=> m.EmailAddress, new {@placeholder = "Email Address",
                 @class = "someClass"})

和那个类的风格。 希望这会有所帮助。

修改 如果您想在输入字段中添加font-awesome图标而不是位图图片，您还可以尝试：

@Html.TextBoxFor(m => m.Email, new { @class = "someClass", 
    placeholder = HttpUtility.HtmlDecode(" Email Address"),
    style = "font-family:Arial, FontAwesome" })

根据需要切换字体真棒代码。或者，您可以使用CSS再次执行此操作：

.someClass::-webkit-input-placeholder::before { font-family: 
             fontAwesome; content:'\f007  '; color: #69f }

Answer 3

您必须创建一个css类或id才能执行此操作，并使用此类或ID设置文本框。例如：

Css文件

.txtWithImage{
   background-image:url('images/usericon.png') left center no-repeat;
}

Asp.Net MVC文本框

@Html.TextboxFor(m=> m.EmailAddress, new {@class="txtWithImage" @placeholder = "Email Address"})