Question

是否有一种简单的方法可以使用字体很棒的圆形图标在数字周围形成一个双圈？我也希望能够改为使用square-o图标。

这是一个Plunker示例，但这在某些分辨率下才是完美的，我也希望线条宽度相同：https://plnkr.co/edit/M9Dku94gApyxQ8zBzrVw?p=preview

.double {
  top: -4.3px;
  left: -1.9px;
  font-size: 2.6em;
}

<span class="fa-stack fa-1x">
  <i class="fa fa-circle-thin fa-stack-2x double"></i>
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <strong class="fa-stack-1x">4</strong>
</span>

Answer 1

你可以尝试缩放，因为px不是很好

element[parseInt(lastIndex) +1] = { id: id, quantity: quantity };

Answer 2

<style>
  .double {
    top: -0.0px;
    left: -0.0px;
    font-size: 1.4em;
  }
</style>

  <body>

    <span class="fa-stack fa-2x">
      <i class="fa fa-circle-o fa-stack-1x double"></i>
      <i class="fa fa-circle-thin fa-stack-2x "></i>
      <strong class="fa-stack-1x">4</strong>
    </span>

你可以使用fa-cicle -o和circle-thin

编辑：现在添加样式看起来更好

双圈堆栈使用字体真棒

2 个答案: