ASP.NET – Using Bootstrap Glyphicons in .NET Website

ASH

9 years ago

ASP.NET – Using Bootstrap Glyphicons in .NET Website

Sometimes it’s good practice to use a icon to indicate the button functionality. In asp.net, the default button doesn’t have any criteria to achieve this feature. So, I made a asp.net website in which I used the normal html buttons to achieve this. This example is using the bootstrap css. You can get additional info regarding Glyphicons over here

The design page :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Glyphicons.aspx.cs" Inherits="Glyphicons" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Bootstrap Elements</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <style type="text/css">
 body
 {
 padding: 10px;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <button type="button" class="btn btn-warning btn-lg" id="Music" onserverclick="Is"
 runat="server">
 <span class="glyphicon glyphicon-music"></span>&nbsp;Music
 </button>
 <button type="button" class="btn btn-success btn-lg" onserverclick="Is" runat="server"
 id="Search">
 <span class="glyphicon glyphicon-search"></span>&nbsp;Search
 </button>
 <button type="button" class="btn btn-primary btn-lg" onserverclick="Is" runat="server"
 id="Contacts">
 <span class="glyphicon glyphicon-user"></span>&nbsp;Contacts
 </button>
 <button type="button" class="btn btn-default btn-lg" onserverclick="Is" runat="server"
 id="Settings">
 <span class="glyphicon glyphicon-cog"></span>&nbsp;Settings
 </button>
 <button type="button" class="btn btn-danger btn-lg" onserverclick="Is" runat="server"
 id="Delete">
 <span class="glyphicon glyphicon-trash"></span>&nbsp;Delete it!
 </button>
 <asp:TextBox runat="server" ID="inputError" />
 <asp:Label runat="server" ID="txt" />
 <br />
 <hr />
 </div>
 </form>
</body>
</html>