CODEWITHSUNDEEP
c#asp.nettwitter-bootstrapfont-awesomefont-awesome-5
Newton Suhail
Newton Suhail

Reputation: 113

Adding fontawesome icon to asp.net button

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>

Upvotes: 5

Views: 6759

Answers (3)

M&#225;ster
M&#225;ster

Reputation: 1001

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>

Upvotes: 2

Eugenio Escobar
Eugenio Escobar

Reputation: 21

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>

Upvotes: 2

subramanya46
subramanya46

Reputation: 481

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>

Upvotes: -2

Related Questions