Adding fontawesome icon to asp.net button

Question

I am using gridview to show the data and in the gridview itself I have some action buttons like Edit Delete and Preview for picture view. but I don't want the text "Preview" on my preview button, i want (fontawesome icon) instead the text(preview). My code is here....

<asp:GridView ID="GVProduct" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CssClass="table table-bordered table-sm table-hover table-striped" EmptyDataText="No rows  for the selection criteria." EnableTheming="False" PageSize="5" OnRowCommand="grdForRows_RowCommand" OnPageIndexChanging="grdForRows_PageIndexChanging">
<Columns>
    <asp:BoundField DataField="ProId" HeaderText="Prod.Id">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
    <asp:BoundField DataField="ProName" HeaderText="Product Name">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:BoundField DataField="ProCategory" HeaderText="Category">
        <HeaderStyle HorizontalAlign="Left" />
        <ItemStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:ButtonField Text="Preview" ButtonType="Button" HeaderText="Photo" CommandName="btnPreview">
        <ControlStyle CssClass="btn btn-success btn-sm" />
    </asp:ButtonField>
    <asp:ButtonField Text="Edit" ButtonType="Button" CommandName="btnEdit">
        <ControlStyle CssClass="btn btn-primary btn-sm" />
    </asp:ButtonField>
    <asp:ButtonField ButtonType="Button" CommandName="btnDelete" Text="Delete">
        <ControlStyle CssClass="btn btn-danger btn-sm" />
    </asp:ButtonField>
</Columns>

the code for the icon which i want to add on button is

<i class="fas fa-eye"></i>

You cannot add Inner Html to that control, you will have to rethink your design or deal with not having an icon in the button — maccettura, Mar 05 '18 at 18:13
If you want to use those fonts in a GridView button you need to use TemplateField instead of ButtonFIeld. Then you have full control over the html. — VDWWD, Mar 05 '18 at 18:28

Máster · Answer 1 · 2019-10-29T00:29:50.953

2

I found the way to add Font Awesome icons to GridView buttons. Use a ButtonType="Link":

<asp:GridView ID= ... >
   <Columns>
      ...
      <asp:ButtonField CommandName="myComand" Text="<i class='fa fa-info'></i>" 
      ButtonType="Link" ControlStyle-CssClass="btn btn-primary" />
      ...
   </Columns>
</asp:GridView>

edited Oct 29 '19 at 00:29

answered Nov 09 '18 at 18:08

Máster

981
11
23

score 2 · Answer 2 · answered Oct 28 '19 at 03:17

You can download the SVG file from Fontawesome, then you added the file with the "ImageUrl" tag in a ImageButton, like this:

<asp:TemplateField>
      <HeaderTemplate>
           <asp:Label ID="Label2" runat="server" Text="Edit" ToolTip="Edit"></asp:Label>
      </HeaderTemplate>
      <ItemTemplate>
           <asp:ImageButton runat="server" ImageUrl="~/context/Imagenes/Edit.svg" ID="Id" 
                CommandName="Command" />
      </ItemTemplate>
</asp:TemplateField>

subramanya46 · Answer 3 · 2018-12-06T10:02:21.063

-2

You Can Use Image
DeleteImageUrl="~/images/remove.png"

Its a Working one I dont Know why some one givenn negative

<asp:CommandField ButtonType="Image" ShowDeleteButton="True" HeaderStyle-BackColor="LightBlue" DeleteImageUrl="~/images/remove.png" ItemStyle-Width="2%"></asp:CommandField>

edited Dec 06 '18 at 10:02

answered Mar 07 '18 at 05:00

subramanya46

451
6
9

Adding fontawesome icon to asp.net button

3 Answers3