IT TIP

glyphicon 및 글꼴이 다른 텍스트가있는 ASP.NET Actionlink

itqueen 2020. 12. 9. 22:07
반응형

glyphicon 및 글꼴이 다른 텍스트가있는 ASP.NET Actionlink


버튼을 표시하고 @Html.ActionLink싶지만 텍스트에 응용 프로그램 글꼴이 있어야합니다.

이 코드로 :

<span>
    @Html.ActionLink("  Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>

버튼을 받았지만 Create New 텍스트가 glyphicon font-family와 함께 나타납니다.

glyphicon 클래스를 범위에 넣어도 아무것도 변경되지 않습니다.


a- 태그에 glyphicon 클래스를 추가해서는 안됩니다.

Bootstrap 웹 사이트에서 :

다른 구성 요소와 혼합하지 마십시오. 아이콘 클래스는 다른 구성 요소와 직접 결합 할 수 없습니다. 동일한 요소의 다른 클래스와 함께 사용해서는 안됩니다. 대신 중첩을 추가 <span>하고 아이콘 클래스를 <span>.

빈 요소 에만 사용 아이콘 클래스는 텍스트 내용이없고 자식 요소가없는 요소에만 사용해야합니다.

즉, 원하는 방식으로 작동하는 올바른 HTML은 다음과 같습니다. <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

이것은 Html.ActionLink도우미를 부적합 하게 만듭니다 . 대신 다음과 같은 것을 사용할 수 있습니다.

<a href="@Url.Action("Action", "Controller")" class="btn btn-warning">
    link text 
    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</a>

이것은 MVC 5에서 저에게 효과적입니다.

@Html.ActionLink(" ", "EditResources", "NicheSites", new { ViewBag.dbc, item.locale, ViewBag.domainId, domainName = ViewBag.domaiName }, new {@class= "glyphicon glyphicon-edit" })

첫 번째 매개 변수는 비어 있거나 null 일 수 없습니다.


HTML을 사용하는 것보다 HTML을 작성하는 것이 더 나을 수 있습니다 HtmlHelper.ActionLink.

<span>
    <a href="@Url.Action("Create")" class="btn btn-warning">
        <span class="glyphicon glyphicon-plus-sign"></span>
        Create New
    </a>
</span>

여기 내 꺼야. Andrey Burykin에서 영감을 얻음

public static class BensHtmlHelpers
{
    public static MvcHtmlString IconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
    {
        var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
        var iconMarkup = String.Format("<span class=\"{0}\" aria-hidden=\"true\"></span>", iconName);
        return new MvcHtmlString(linkMarkup.Insert(linkMarkup.IndexOf(@"</a>"), iconMarkup));
    }
}

@Url.Action대신 @Html.ActionLink아래의 예제 코드 대신 접근 방식을 사용해야 합니다.

<span>
<a href="@Url.Action("Create", new { @class = "btn btn-warning" })"><span class="glyphicon glyphicon-plus-sign"></span> Create New</a>
</span>

간단한 확장을 사용할 수 있습니다.

private static readonly String SPAN_FORMAT = "<span class=\"{0}\" aria-hidden=\"true\"></span>";
private static readonly String A_END = "</a>";
public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
{
    var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
    if (!linkMarkup.EndsWith(A_END))
        throw new ArgumentException();

    var iconMarkup = String.Format(SPAN_FORMAT, iconName);
    return new MvcHtmlString(linkMarkup.Insert(linkMarkup.Length - A_END.Length, iconMarkup));
}

용법:

Html.ActionLink(" ", "DeleteChart", new { Id = _.Id }, "glyphicon glyphicon-trash")

시도 해봐!

@Html.ActionLink(" Cerrar sesión", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" , @class = "glyphicon glyphicon-log-in" })

Let's have a try on this. Let me know if it is working .Thanks

<style>
   span.super a
  {
      font: (your application font) !important;
  }

</style>

<span class="super">
    @Html.ActionLink("  Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>

How about using Html.BeginForm with a FormMethod.Get / FormMethod.Post

@using (Html.BeginForm("Action", "Controller", new { Area = "" },
FormMethod.Get, htmlAttributes: new { title = "SomeTitle" }))
{   
   <button type="submit" class="btn-link" role="menuitem">
   <i class="glyphicon glyphicon-plus-sign"></i>Create New</button>
}

Try this. Worked for me.

<button class="btn btn-primary"><i class ="fa fa-plus">@Html.ActionLink(" ", "Create", "Home")</i></button>

Try this. Use "htmlAttributes"

 @Html.ActionLink("  Create New", "Create", null, htmlAttributes: new { @class = "<your class>",@style="font:<your font>" })

참고URL : https://stackoverflow.com/questions/26174013/asp-net-actionlink-with-glyphicon-and-text-with-different-font

반응형