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>" })
'IT TIP' 카테고리의 다른 글
| 드롭 다운 메뉴의 부트 스트랩 3 화살표 (0) | 2020.12.09 |
|---|---|
| 거꾸로 된 캐럿 (0) | 2020.12.09 |
| Alamofire를 통해 json 배열 보내기 (0) | 2020.12.09 |
| Xcode-장치 폴더를 무료로 지울 수 있습니까? (0) | 2020.12.09 |
| "테스트 양식은 로컬 컴퓨터의 요청에만 사용할 수 있습니다." (0) | 2020.12.09 |