ASP 버튼 안에 있는 멋진 글꼴

ASP 버튼 안에 있는 멋진 글꼴

이것은 렌더링 폰트 awesome의 아이콘이 아니라 HTML을 그대로 보여주는 my asp:button 코드입니다.

  <asp:Button runat="server" ID="btnRun" Text="<i class='icon-camera-retro'></i> Search" ValidationGroup="edt" OnClick="btnRun_Click"  CssClass="greenButton"/>

제가 이 문제를 어떻게 해결할 수 있는지 아십니까?

기본 asp.net 버튼으로는 HTML 버튼을 사용할 수 없으며 = 서버 속성으로 실행해야 합니다.

<button runat="server" id="btnRun" class="btn btn-mini" title="Search">
    <i class="icon-camera-retro"></i> Search
</button>

코드 뒤에 다음을 추가합니다.

onserverclick="functionName" 

버튼으로 C#에서 다음을 수행합니다.

protected void functionName(object sender, EventArgs e)
{
    Response.Write("Hello World!!!");
}

마지막 버튼은 다음과 같습니다.

<button runat="server" id="btnRun" onserverclick="functionName" class="btn btn-mini" title="Search">
    <i class="icon-camera-retro"></i> Search
</button>

링크 버튼을 사용할 수 있습니다.

<asp:LinkButton runat="server" ID="btnRun" Text="<i class='icon-camera-retro'></i> Search" 
                ValidationGroup="edt" OnClick="btnRun_Click" CssClass="greenButton" />

텍스트 필드에서 HTML을 지원합니다.

당신은 CSS로만 할 수 있는 것이 아니라 할 수 있습니다.당신은 단지 버튼의 Text 속성을 폰타썸 문자의 유니코드 값으로 설정하고 버튼에 'fa' css 클래스를 주어 폰타썸 글꼴을 차지하게 하면 됩니다.

<asp:Button ID="Button1" runat="server" 
    Text="\xF135" CssClass="fa" />

크랭크를 돌리면 모든 아이콘 코드를 강력하게 입력할 수 있는 도우미 라이브러리를 만들었습니다.

<asp:Button ID="Button1" runat="server" 
    Text="<%# FontAwesome.Icons.Rocket %>" CssClass="fa" />

Nuget: 설치-패키지 글꼴Awesome-ASP.NET

출처: https://github.com/kemmis/FontAwesome-ASP.NET

링크 단추 사용

<asp:LinkButton runat="server" ID="btnRun" ValidationGroup="edt" OnClick="btnRun_Click" CssClass="greenButton" > <i class='icon-camera-retro'></i> Search </asp:LinkButton>

이 솔루션을 사용해 볼 수도 있습니다.

<span  style="position:relative;">
    <i class="fa fa-hand-o-down"></i>
    <asp:Button ID="btnCatMoveDown" CssClass="movedown" CausesValidation="false" Text="" CommandName="categorymovedown" CommandArgument='<%#Eval("SomeId")%>' runat="server"></asp:Button>
</span>

<style>
    .movedown {
        position:absolute;
        opacity:0;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
</style>

다른 답변에서 asp:button이 다른 답변으로 변경되면 asp:button, EASY를 사용할 수 있는지 보여줍니다 :)

/*CSS*/
/*Colors depends what btn you use, in this case i´m using btn-default*/

.btn_asp_icon{
    border: 0;
    background-color: #fff;
}

.btn:hover > .btn_asp_icon{
    background-color: #e6e6e6;
}

<!-- HTML -->

<div class="btn btn-default">

<i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
<asp:Button cssClass="btn_asp_icon" runat="server" text="Consultar"/>   

</div>

Nuget에 붙이세요!

설치-패키지 글꼴Awesome-ASP.NET 사용량

웹 양식의 글꼴 멋진 아이콘 단추

asp.net 웹 양식 단추 컨트롤 내에서 FontAwesome 아이콘을 사용할 수 있습니다.FontAwesome에서 원하는 아이콘에 데이터를 바인딩하기만 하면 됩니다.아이콘 클래스의 정적 속성입니다.그런 다음 단추의 DataBind() 또는 부모 컨트롤 또는 페이지의 DataBind()를 호출합니다.

<asp:Button ID="Button1" runat="server" 
    Text="<%# FontAwesome.Icons.Rocket %>" CssClass="fa" />

Load form 메서드에 다음을 입력합니다.

btn_Test.Text = "Hello " + FontAwesome.Icons.LongArrowRight;

CssClass 버튼:

CssClass="fa"

이 코드는 v5.15에서 작동했습니다.

다음 파일을 wwwroot 아래의 글꼴 폴더에 추가해야 했습니다.

1. FontAwesome.otf
2. 폰타썸웹프론트.eot
3. fontawesome-웹프론트.tg
4. fontawesome-webfront.ttf
5. 폰타어썸 웹프론트을 무시하는
6. 폰타어썸 웹프론트woff2

<div>
    <a asp-controller="Controller" asp-action="CSHTMLFILE"><i class="fa fa-1x fa-arrow-left "></i> Go Back to Previous Page</a>  
</div>

function redirectToButton(buttonId) {
  document.getElementById(buttonId).click();
}

.btnHidden {
  background: none;
  color: white;
  padding: 0rem;
  border: none;
}

<div class="btn btn-primary" onclick="redirectToButton('<%= btnSearch.ClientID %>')">
    <i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
    <asp:Button runat="server" ClientIDMode="Static" CssClass="btnHidden" ID="btnSearch" Font-Bold="true" Text="Search" />
</div>

언급URL : https://stackoverflow.com/questions/15064005/font-awesome-inside-asp-button