Question

使用Fontawesome字体，我必须使它成为连接到高度的超链接。所以如何在hello tim @ test旁边显示图标？

当我将字体放在与用户名相同的li中时，它看起来像这样..

<li>
            <a href="#"><i class="fa fa-user" style="color:green"></i></a> @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>

和内联：

<li><div style="display:inline">
            <a href="#"><i class="fa fa-user" style="color:green"></i></a> @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
            </div>
        </li>

当我将它作为一个单独的li使用时，我更接近我想要的东西，但它仍然不对，就像我喜欢：

 <li>
            <a href="#"><i class="fa fa-user" style="color:green"></i></a>
        </li>

完整代码：

@using Microsoft.AspNet.Identity

@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#"><i class="fa fa-user" style="color:green"></i></a>
        </li>
        <li>
             @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

Answer 1

@Html.ActionLink只为您创建一个A元素...所有@Html方法都会执行此类操作...在您的第二个示例中，您将锚点放在另一个锚点中

在这种情况下，您需要对内容进行更多控制......在这种情况下，@Url.Route是您想要将控制器/操作的路由仅注入A元素，而图标在里面，以及其他内容。

@using Microsoft.AspNet.Identity

@if (Request.IsAuthenticated)
{
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a href="@Url.Route("Index", "Manage")" title="Manage">
        <i class="fa fa-user" style="color:green"></i>
        Hello @User.Identity.GetUserName()!
      </a>
    </li>
    <li>
      @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, htmlAttributes: new { style: "display:inline;" }))
      {
        @Html.AntiForgeryToken()
        <a href="javascript:void(0);" onclick="this.parentNode.submit();">
          Log off
        </a>
      }
    </li>
  </ul>
} else {
  <ul class="nav navbar-nav navbar-right">
    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
    <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
  </ul>
}

其他更改包括，将注销表单移动到简单地包装链接，并调整链接的操作以定位父级...您将navbar-right分配给表单可能会使事情稍微过时。上面的表单不需要ID作为参考，因为它是注销链接的parentNode。

如何在用户名旁边制作字体棒

1 个答案: