Question

我正在使用Font Awesome在数字周围创建一个圆圈。 HTML如下：

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

这是jsfiddle演示：

http://jsfiddle.net/mddc/dkgzLrLf/2/

如本演示所示，圆圈周围有相当大的空间。我怎样才能优雅地删除它？并将其放置在其容器的左上角（div标签）？

谢谢和问候。

Answer 1

无法理解为什么要使用Font Awesome，因为你只需要一个数字边框，所以这是一个简单的CSS解决方案

HTML：

<strong class="nbr">2</strong>

CSS：

.nbr {
    display: inline-block;
    font-size: 24px;
    line-height: 1.2em;
    width: 1.2em;
    border: 2px solid #000;
    border-radius: 50%;
    text-align: center;
}

保持行高与宽度（em或px）相同，以获得完美的圆

这是更新的小提琴https://jsfiddle.net/dkgzLrLf/3/

字体真棒：如何删除带圆圈的数字周围的空间

1 个答案: