CODEWITHSUNDEEP
htmlcssasp.netinputglyphicons
Raviteja
Raviteja

Reputation: 3489

How to make a glyphicon work as a submit button?

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

Upvotes: 14

Views: 34279

Answers (5)

Brad
Brad

Reputation: 11515

<button class="btn btn-secondary-outline glyphicon glyphicon-search" type="submit">

Upvotes: 0

Suman KC
Suman KC

Reputation: 3528

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.

Upvotes: 34

Jinu Kurian
Jinu Kurian

Reputation: 9426

Try this :) 

.circle {
  border-radius: 100%;
  border: 0.25em solid black;
  height: 50px;
  width: 50px;
}
.glyphicon.glyphicon-edit {
  font-size: 28px;
  padding: 8px 0 0 3px;
}
.circle button {
  background: none;
  border: none;
  outline: none;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

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

Upvotes: 0

Noopur Dabhi
Noopur Dabhi

Reputation: 1947

Use above html and css:

Html: 

<div class="circle">
   <button type="submit" class="submit-with-icon">
     <span class="glyphicon glyphicon-edit"></span>
   </button>
</div>

Css :

.circle {
  border-radius: 100%;
  border: 0.25em solid black;
  height: 50px;
  width: 50px;
}
.glyphicon.glyphicon-edit{
  font-size:28px;
  padding: 8px 3px 0 8px;
}

.submit-with-icon {
  background: transparent;
    border: 0px;
    padding: 0;
    outline: 0;
}

.circle:active {
  content: '';
  background-color: rgb(235, 235, 235);
  border-color: rgb(173, 173, 173);
}

I've added one class named submit-with-icon in which I'm removing border and making background transparent.

Here is working fiddle.

Upvotes: 7

misterManSam
misterManSam

Reputation: 24712

From what I can see, there is no need to use other elements. Use a <button> element for the submit button, instead of <input>, and apply the glyphicon-edit class directly to it.

  • Style the hover, focus and active states as desired and remove the default focus outline.

  • The glyph is vertically centered with line-height.

Example

.glyphicon.glyphicon-edit {
  font-size: 25px;
  line-height: 45px;
  border-radius: 50%;
  border: 3px solid black;
  height: 50px;
  width: 50px;
  background: none;
  transition: color .3s, background .3s;
  /*box-shadow helps soften the choppy circle*/
  box-shadow: 0 0 1px #000, inset 0 0 2px #000;
}
.glyphicon.glyphicon-edit:hover {
  background: #000;
  color: #FFF;
}
.glyphicon.glyphicon-edit:focus {
  border-color: blue;
  outline: none;
}
.glyphicon.glyphicon-edit:active {
  border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://jsfiddle.net/iamraviteja/DTcHh/14991/netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />




<button class="glyphicon glyphicon-edit" name="Editing" value="Edit"></button>

Upvotes: 2

Related Questions