web-dev-qa-db-fra.com

Comment faire fonctionner un glyphicon comme bouton d'envoi?

J'ai un bouton de type Submit avec du texte comme edit pour POST dans asp.net HTML.BeginForm.Je veux le remplacer par un glyphicon-edit. Comment obtenir les mêmes fonctionnalités que input. Je peux obtenir les fonctionnalités à l'aide du bouton Modifier. Je veux les mêmes fonctionnalités à l'aide de 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 et Look de glyphicon-edit est inclus dans un violon ici

htmlcssasp.netinputglyphicons
11
Raviteja

Vous pouvez écrire un bouton avec un type submit et envelopper un glyphicon à l'intérieur

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

Modifier:

  • Le style de bouton sera appliqué au glyphicon, mais vous pouvez à distance les propriétés css du bouton par défaut (par exemple. background:none;border:none;padding:0;) et appliquer un nouveau style
  • une bordure onclick apparaît? - outline:none devrait résoudre le problème de bordure de contour en cliquant.
28
Suman K.C

Utilisez ci-dessus html et 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);
}

J'ai ajouté une classe nommée submit-with-icon dans lequel je supprime la bordure et rend le fond transparent.

Ici fonctionne violon .

7
Noopur Dabhi

D'après ce que je peux voir, il n'est pas nécessaire d'utiliser d'autres éléments. Utiliser un <button> élément pour le bouton d'envoi, au lieu de <input>, et appliquez le glyphicon-edit classe directement dessus.

  • Stylisez le survol, la mise au point et les états actifs comme vous le souhaitez et supprimez le contour de mise au point par défaut.

  • Le glyphe est centré verticalement avec line-height.

Exemple

.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>
2
misterManSam

Essaye ça :)

.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>
0
Jinu Kurian