css - 在按钮中的 Font Awesome 顶部添加图标？

Question

我已经创建了类似的东西，但是在我的按钮中我想要类似的东西 -<i class="fa fa-clock-o"></i>在右上角。HTML：

 <button class="btn btn-default btn-sm " > <i  class="fa fa-arrow-down fa-lg" style="color:green"></i><span><i class="fa fa-clock-o"></i></span></button>

CSS：

.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

这是我的代码：https ://codepen.io/anon/pen/XqZENw 感谢您的提前！

标签： csstwitter-bootstrap

Answer 1

只需设置position: relative按钮和position: absolute里面的图标。

像这样：

button {
  position: relative;
}

button i.fa.fa-clock-o {
  position: absolute;
  top: 0;
  right: 0;
}