真棒

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