如何使字形图标用作提交按钮？答案

【问题标题】：How to make a glyphicon work as a submit button?如何使字形图标用作提交按钮？
【发布时间】：2016-03-11 16:14:38
【问题描述】：

我有一个Submit 类型的按钮，文本为edit，用于asp.net HTML.BeginForm 中的POST 方法。我想用glyphicon-edit 替换它。如何实现与input 相同的功能.我可以使用“编辑”按钮实现该功能。我想要使用 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>

glyphicon-edit 的 CSS 和外观包含在小提琴 here 中

【问题讨论】：

标签： html css asp.net input glyphicons

【解决方案1】：

您可以编写一个类型为submit 的按钮并在里面包裹一个字形图标

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

编辑：

按钮样式将应用于 glyphicon，但您可以远程默认按钮 css 属性（例如 background:none;border:none;padding:0;）并应用新样式
点击边框出现？ - outline:none 应该可以解决点击时的轮廓边框问题。

【讨论】：

如果我使用这个，按钮的样式将被应用，我不想要那个。看我的小提琴。
@IamRaviteja 您始终可以覆盖/取消默认按钮 css 属性。（例如background:none; border:none;padding:0;）背景颜色、边框、填充只是按钮的默认属性
outline:none; 会解决 onclick 的轮廓边框问题。我看不到我的边框。

【解决方案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 的类，我将在其中移除边框并使背景透明。

这里正在工作fiddle。

【讨论】：

点击时出现边框
我已经更新了我的答案和小提琴。添加大纲：0；在 submit-with-icon 类中，它将删除点击边框。

【解决方案3】：

据我所知，没有必要使用其他元素。对提交按钮使用<button> 元素，而不是<input>，并将glyphicon-edit 类直接应用到它。

根据需要设置悬停、焦点和活动状态的样式，并删除默认焦点轮廓。
字形以line-height 垂直居中。

示例

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

【讨论】：

【解决方案4】：

试试这个:)

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

【讨论】：

点击边框出现
@IamRaviteja 更新了它。将“outline: none”添加到按钮将解决此问题。 :)