Question

我有fa-circle-thin我要放置一个glyphicon，所以看起来我的glyphicon周围有一个圆形边框。我只是想知道这是否可能？

我试过以下：

        <div class="col-md-4">
            <span class="circle">
                <i class="glyphicon glyphicon-star"></i>
            </span>
            <h4 class="service-heading">Lorem</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>

然而，这两个图标并排显示。我为我的FA做了一个看起来像这样的课程：

.circle:before {
    font-family: fontawesome-webfont;
    text-decoration: none;
    content: "\f1db";
    background-color: transparent;
    z-index:-1;
}

Answer 1

我只是使用border-radius: 50%而不是尝试定位两个字形（另外你可以设置边框样式！）。我也使用text-align: center并将line-height和height值匹配来对齐：

.circle {
  border: 1px solid black;
  border-radius: 50%;
  padding: 3px;
  width: 25px;
  height: 25px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
}

.alt {
    border-width: 2px;
    border-color: red;
    color: red;
    width: 15px;
    height: 15px;
    line-height: 15px;
}

<div class="circle">
  
</div>

<div class="circle alt">
  
</div>

Answer 2

如何使用posiiton：绝对？

.glyphicon{
  position: absolute;
  top: 3px;
  left: 15px;
}

结果：jsfiddle

堆叠的字形与字体真棒

2 个答案: