将fontawesome图标添加到asp.net按钮

Question

我正在使用gridview来显示数据，在gridview中我有一些动作按钮，如编辑、删除和预览图片视图。但是我不想在我的预览按钮上显示文本"预览"，我想要一个(fontawesome图标)代替文本(预览)。我的代码在这里...

<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>

我想在按钮上添加的图标代码是：

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

- Newton Suhail

---

您无法向该控件添加 Inner Html，您将不得不重新考虑设计或接受在按钮中没有图标的情况。 - maccettura

如果您想在GridView按钮中使用这些字体，您需要使用TemplateField而不是ButtonFIeld。然后您就可以完全控制HTML了。 - VDWWD

很简单，使用JavaScript并添加类。 - Darshan Dave

Answer 1

我找到了一种在GridView按钮中添加Font Awesome图标的方法。使用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>

- Máster

Answer 2

您可以从Fontawesome下载SVG文件，然后使用"ImageUrl"标签将文件添加到ImageButton中，就像这样：

<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>

- Eugenio Escobar

Answer 3

你可以使用图像
DeleteImageUrl="~/images/remove.png"

这是一个可工作的，我不知道为什么有人给了负面评价

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

- subramanya46