如何在按钮内的Font Awesome图标右上角添加图标？

嘿，我来帮你实现按钮右上角放置时钟图标的效果！你的现有代码已经有了基础结构，只需要调整一下定位和样式就能搞定，下面是修改后的完整代码：

修改后的HTML代码 #

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

修改后的CSS代码 #

/* 给按钮设置相对定位，作为图标的定位容器 */
.btn-with-clock {
  position: relative;
  /* 调整按钮内边距，避免图标和其他元素重叠 */
  padding-right: 25px;
}

/* 时钟图标定位到按钮右上角 */
.btn-clock-icon {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 0.8em; /* 自定义图标大小 */
  color: #666; /* 自定义图标颜色 */
}

/* 保留你原来的data-count伪元素样式（如果仍需使用） */
.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;
}

关键调整说明： #

• 给按钮新增btn-with-clock类并设置position: relative，让内部的时钟图标能基于按钮进行绝对定位。
• 给时钟图标添加btn-clock-icon类，通过position: absolute固定在按钮右上角，同时用top和right控制它与按钮边缘的距离，font-size可按需调整大小。
• 给按钮加padding-right是为了避免箭头图标和时钟图标重叠，让布局更协调。

这样调整后，时钟图标就会稳稳地出现在按钮的右上角啦！

内容的提问来源于stack exchange，提问作者bafix2203