Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I put a Bootstrap Glyphicon inside an asp:Button in ASP.Net?

I'm using Bootstrap 3 in my project, and I want to use Bootstrap Glyphicons in ASP.net buttons.

Here is the code I used, though it didn't work out (I got a sample which uses Twitter Bootstrap <span> tags instead of <i> tags):

<asp:Button ID="btnRandom"     runat="server"     Text="<span aria-hidden='true'         class='glyphicon glyphicon-refresh'>         </span>"     onclick="btnRandom_Click" /> 

Maybe something extra should be done.

How can I get it to work? Thanks in advance for the replies.

like image 326
allence Avatar asked Jun 18 '14 12:06

allence


People also ask

Is bootstrap a Glyphicon?

Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons.

Can I use Glyphicons in bootstrap 4?

Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.


2 Answers

You have to use asp:LinkButton instead of a asp:Button, here is how it works for me using Bootstrap 3 in an ASP.NET web-application:

From your code you can make the following work:

<asp:LinkButton ID="btnRandom"              runat="server"              CssClass="btn btn-primary"                 OnClick="btnRandom_Click">     <span aria-hidden="true" class="glyphicon glyphicon-refresh"></span> </asp:LinkButton> 

Here is an example of what I use for a Submit Button with text "Submit":

<asp:LinkButton ID="SubmitBtn"                  runat="server"                  CssClass="btn btn-primary"                     OnClick="SubmitBtn_Click">     <span aria-hidden="true" class="glyphicon glyphicon-ok"></span>Submit </asp:LinkButton> 
like image 95
lucidgold Avatar answered Oct 02 '22 11:10

lucidgold


What is real use of ASP Server control when you can do that in HTML server control :

You can convert the HTML element to a server control by setting the runat="server" attribute.

<button runat="server" > <span aria-hidden="true" class="glyphicon glyphicon-refresh"></span>Refresh </button> 
like image 29
Mehdi Souregi Avatar answered Oct 02 '22 11:10

Mehdi Souregi