真棒

Question

堆积glyphicons与字体我有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：absolute？

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

结果：jsfiddle