How to make a glyphicon work as a submit button?

html css asp.net input glyphicons
Raviteja picture Raviteja · Dec 7, 2015 · Viewed 30.8k times · Source

I have a button of type Submit with text as edit for POST method in asp.net HTML.BeginForm.I want to replace it with a glyphicon-edit.How to achieve the same functionality as input.I am able to achieve the functionality using Edit button.I want the same functionality using glyphicon-edit

HTML

<br />

<input type="submit" class="btn btn-default" name="Editing" value="Edit" />

<div class="circle">
  <div class="glyphicon glyphicon-edit"></div>
</div>

CSS and Look of glyphicon-edit is included in a fiddle here

Answer

Suman KC picture Suman KC · Dec 7, 2015

You can write a button with a type submit and wrap an glyphicon inside

<button type="submit">
   <span class="glyphicon glyphicon-edit"></span>
</button>

Edit :

  • The button style will applied to glyphicon, but you can remote the default button css properties (for eg. background:none;border:none;padding:0;) and apply new style
  • onclick border appears ? - outline:none should solve the outline border issue onclick.

Related questions

How do I put hint in a asp:textbox

How do I put a hint/placeholder inside a asp:TextBox? When I say a hint I mean some text which disappears when the user clicks on it. Is there a way to achieve the same using html / css?

Read More
Dynamic background-image on body (ASP.NET)

I have a situation where I have ~10-20 different background images in a folder. When my site loads I need to choose a specific one of these images based upon some values from the database. I thought about using runat=…

Read More
No opacity on div inside a div with opacity

I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (that covers the whole …

Read More