Home > Software engineering >  ASP.NET GridView - HyperlinkField
ASP.NET GridView - HyperlinkField

Time:09-04

I try to add two hyperlink fields into my ASP.NET grid view, but the icon size that appears on the website is different. Is anyone knows how to solve this problem by making the icon size look equally?

<asp:GridView ID="gvProdCategory" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1" CssClass="table table-striped table-hover" AllowPaging="True" AllowSorting="True" HorizontalAlign="Center">
    <Columns>
        <asp:BoundField DataField="CategoryID" HeaderText="Category ID" InsertVisible="False" ReadOnly="True" SortExpression="CategoryID">
        <HeaderStyle Width="10%" />
        </asp:BoundField>
        <asp:BoundField DataField="CatName" HeaderText="Category" SortExpression="CatName" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle">
        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>
        </asp:BoundField>
        <asp:BoundField DataField="CatDesc" HeaderText="Descriptions" SortExpression="CatDesc" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle">
        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>
        </asp:BoundField>
        <asp:HyperLinkField DataNavigateUrlFields="CategoryID" DataNavigateUrlFormatString="category-edit.aspx?CategoryID={0}" Text="&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;" HeaderText="Edit" >
        <ControlStyle CssClass="edit" />
        </asp:HyperLinkField>
        <asp:HyperLinkField Text="&lt;i class=&quot;fa-solid fa-circle-minus&quot;&gt;&lt;/i&gt;" HeaderText="Delete">
        <ControlStyle CssClass="delete" />
        </asp:HyperLinkField>
    </Columns>
    <HeaderStyle HorizontalAlign="Center" />
    <RowStyle HorizontalAlign="Center" />
</asp:GridView>

The current display is here:

CodePudding user response:

You can use font size for maintain the icon size equal , you site css will override some properties of font-awsome css

Text="<i class='fa fa-print' aria-hidden='true' style='font-size: 1.5em;'></i>"
  • Related