如何使glyphicon作为提交按钮工作？

Question

我有一个Submit带有文本类型的按钮,如editasp.net HTML.BeginForm中的POST方法.我希望用glyphicon-edit.How 替换它以实现与input.I 相同的功能.我能够使用编辑按钮实现功能.我想要使用相同的功能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和Look glyphicon-edit是这里的小提琴

Answer 1

您可以编写一个带有类型的按钮并在submit其中包装一个glyphicon

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

编辑:

• 按钮样式将应用于glyphicon,但您可以远程使用默认按钮css属性(例如.background:none;border:none;padding:0;)并应用新样式
• onclick边框出现？- outline:none应解决轮廓边界问题onclick.

Answer 2

使用上面的html和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);
}

我添加了一个名为的类submit-with-icon,我正在删除边框并使背景透明.

这是工作小提琴.