如何将十字X放在按钮上？

Question

在我的网站33hotels.com我正在使用Twitter Bootstrap提供的按钮来指示酒店的设施。

我需要的是清楚地表明缺乏舒适性。 为此，我已经显示红色按钮，文本与水平线交叉。但是，从用户测试反馈来看，这还不足以传递缺少缺席的消息。所以我需要更清楚的东西。

我正在考虑在按钮大小的按钮顶部放置一个 Large 十字（字母'X'或图标）。十字架应该很薄，以免模糊文字，但仍然清晰可见。

我的问题是：

• 如何在按钮顶部放置“X”？
• 任何优雅且可重复使用的方式吗？

也许定义一个可以附加到HTML元素的Web组件或“交叉”的Angular指令？

EDIT。让我的问题更清楚 - 我需要放一个大小的按钮大小。

编辑2：这是the ugly version of what I'm trying to achieve。然而，除了丑陋之外，它无法使文本交叉阅读。那么也许我应该使用更薄的'X'版本？

编辑3：这是我能得到的最好，不太漂亮:( http://cl.ly/image/1H1p0n2V2200

Answer 1

在您的情况下，以下代码将适合您

<div class="btn push ng-binding btn-default" 
ng-class="feature.selected ? 'btn-primary': 'btn-default'" 
ng-mousedown="toggleFeature(feature, category, $event)" 
ng-bind="feature.name"> 
    <span style="position: relative;top: -9px;float: right;right: -9px;">×</span>
    Courtyard
</div>

Answer 2

这是你如何做的＆gt;＆gt; Close button

  

<强> HTML

---

<button class="btn btn-default">End Tour<div class="closebox">X</div>

  

<强> CSS

---

button {
    position:relative;
}
.closebox {
    position:absolute;
    opacity:0.5;
    top:-30px;
    right:0;
    left:0;
    font-size:5em;
}

Answer 3

您可以通过content:"X"使用css动态内容并使用伪元素将样式放置在button元素上以放置内容.... 我的例子对于大小和定位来说过于具体：我只想告诉你如何做到这一点：
http://jsbin.com/hijaw/1/

Answer 4

使用bootstrap 3，您可以执行以下操作

<button type="button" class="close">Close
    <span aria-hidden="true" style="font-size: 20px">&times;</span>
</button>

修改

另一个使用font-aswesome

的例子

 <button class="btn btn-default btn-sm" >
    <i class="fa fa-times"></i> Settings
 </button>

编辑2

更改尺寸

 <button class="btn btn-default btn-sm" >
    <i class="fa fa-times" style="font-size: 1em"></i> Settings
 </button>

您可以使用标记

上的样式增加字体大小

Answer 5

也许您可以使用font-awesome或glyphicon来表示何时缺少舒适性（确定或交叉图标+舒适名称）。非常容易使用，你将避免使用图像或脏CSS。检查Bootstrap中的3个示例：

http://fortawesome.github.io/Font-Awesome/examples/