如何将glyphicon作为提交按钮使用？

Question

我在asp.net的HTML.BeginForm中有一个类型为Submit、文本为edit的按钮，用于POST方法。我想要将其替换为glyphicon-edit图标，同时保持与input相同的功能。我已经能够使用"Edit"按钮实现该功能，但我想使用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>

这里包含了一个 jsfiddle，其中包括了 glyphicon-edit 的 CSS 样式和外观。链接地址为 此处。

- Raviteja

Answer 1

你可以使用类型为submit的按钮，并在其中包含一个图标

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

编辑：

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

- Suman KC

---

如果我使用这个，按钮的样式将被应用，但我不想要那个。请参考我的fiddle。 - Raviteja

@IamRaviteja，您可以随时覆盖/清空默认按钮CSS属性。（例如background:none; border:none;padding:0;）背景颜色、边框和填充只是按钮的默认属性。 - Suman KC

outline:none;会解决点击时的轮廓边框问题吗？我在我的页面上看不到边框。 - Suman KC

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 的类，其中我移除了边框并使背景透明。这里是可用的演示。

- Noopur Dabhi

---

点击时出现边框。 - Raviteja

我已经更新了我的答案和代码。在submit-with-icon类中添加outline: 0;，它将删除点击时的边框。 - Noopur Dabhi

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

- misterManSam

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

- Jinu Kurian

---

点击时出现边框。 - Raviteja

@IamRaviteja 已更新。将“outline: none”添加到按钮中将解决此问题。 :) - Jinu Kurian

Answer 5

- Brad