html - 使用 bootstrap v3.3.2，我可以在 img 元素上放置一个字形图标吗？

Question

我正在尝试定位一个字形图标，使其位于 img 元素中心的顶部。我已经尝试过定位、样式、填充、边距、z 索引等，但字形总是希望留在图像之外并且拒绝重叠。

是否可以将字形放置在 img 元素之上？

这是我当前的 html:

<div class="prettycircle">
    <img class="img-circle" src="mp3circlew.png" style="width: 160px; height: 140px;"/>
    <span class="glyphicon glyphicon-usd"></span>
  </div>

还有我当前的 css，尽管不是我尝试过的所有内容:

.prettycircle {
  width: 160px;
}

.prettycircle .glyphicon-usd {
position:relative;
top:2px;
right:-5px;
}

Answer 1

请试试这个代码:

HTML 代码:

<div class="prettycircle">
    <img class="img-circle" src="mp3circlew.png" style="width: 160px; height: 140px;"/>
    <span class="glyphicon glyphicon-usd">dvfdvg</span>
  </div

CSS 代码:

.prettycircle{
   position: relative;
   width: 160px;
}
.prettycircle .glyphicon-usd {
 left: 0;
    position: absolute;
    top: 2px;
}

参见 jsfiidle Demo