如何在@Html.TextBoxFor 中添加字体超棒的图标？

Question

我有以下问题：如何将 fa-user 图标添加到我的文本框中？

我有以下代码：

@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
     <div class="container col-md-12">
          @*@Html.LabelFor(m => m.UserName, new { @class = "control-label" })*@
          <i class="fa fa-user col-md-12" aria-hidden="true"></i>
          @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
          @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
     </div>
</div>

"i" 元素在我的浏览器站点视图中不可见。如果不可能，是否可以将此图标添加到我的网站？

Answer 1

因为这是您只需要查看生成的 html 的 mvc 并与具有图标的代码进行比较。代码如下：

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

如果对我有帮助，请标记为答案。

Answer 2

很可能您可以使用 Font awesome unicode 代码进行显示。示例（值=....）：

 <input type=“submit” value="&#xf0f6 My blog" class=“fa fa-input”>

发现于 https://www.freecodecamp.org/forum/t/solved-adding-font-awesome-icons-to-an-input-button/74139/6

您可以在以下位置找到 unicode 相关代码：

https://fontawesome.com/icons/arrow-right?style=solid

应该适用于任何类似的项目。

Answer 3

   <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-user"></i></span>
      </div>
       @Html.TextBox(Model.UserName, GetHtmlAttributes(Model, "form-control"))
    </div>

如何在@Html.TextBoxFor 中添加字体超棒的图标？

How to add a font-awesome icon into @Html.TextBoxFor?

.net

html

css

asp.net-mvc

font-awesome