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

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

<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中添加字体真棒图标？

3 个答案: