Adding fontawesome icon to asp.net button











up vote
2
down vote

favorite












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>









share|improve this question






















  • 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 5 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 5 at 18:28










  • its simple bro use Javascript and add class
    – Darshan Dave
    Mar 7 at 5:02















up vote
2
down vote

favorite












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>









share|improve this question






















  • 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 5 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 5 at 18:28










  • its simple bro use Javascript and add class
    – Darshan Dave
    Mar 7 at 5:02













up vote
2
down vote

favorite









up vote
2
down vote

favorite











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>









share|improve this 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>






c# asp.net twitter-bootstrap font-awesome font-awesome-5






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 5 at 18:09









Newton Suhail

236




236












  • 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 5 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 5 at 18:28










  • its simple bro use Javascript and add class
    – Darshan Dave
    Mar 7 at 5:02


















  • 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 5 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 5 at 18:28










  • its simple bro use Javascript and add class
    – Darshan Dave
    Mar 7 at 5:02
















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 5 at 18:13




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 5 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 5 at 18:28




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 5 at 18:28












its simple bro use Javascript and add class
– Darshan Dave
Mar 7 at 5:02




its simple bro use Javascript and add class
– Darshan Dave
Mar 7 at 5:02












2 Answers
2






active

oldest

votes

















up vote
0
down vote













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



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





share|improve this answer




























    up vote
    -1
    down vote













    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>





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49116852%2fadding-fontawesome-icon-to-asp-net-button%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      0
      down vote













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



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





      share|improve this answer

























        up vote
        0
        down vote













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



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





        share|improve this answer























          up vote
          0
          down vote










          up vote
          0
          down vote









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



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





          share|improve this answer












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



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






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 9 at 18:08









          Santiago Trejo

          689713




          689713
























              up vote
              -1
              down vote













              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>





              share|improve this answer



























                up vote
                -1
                down vote













                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>





                share|improve this answer

























                  up vote
                  -1
                  down vote










                  up vote
                  -1
                  down vote









                  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>





                  share|improve this answer














                  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>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Dec 6 at 10:02

























                  answered Mar 7 at 5:00









                  subramanya4

                  8915




                  8915






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49116852%2fadding-fontawesome-icon-to-asp-net-button%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      這個網誌中的熱門文章

                      Tangent Lines Diagram Along Smooth Curve

                      Yusuf al-Mu'taman ibn Hud

                      Zucchini