Thêm đường viền vào vòng tròn fa

Question

Làm cách nào để thêm đường viền vào biểu tượng circle từ Phông chữ tuyệt vời? Thực ra kết quả của tôi là:

http://jsfiddle.net/0jhdvj0k/

Biên giới là một cái gì đó như một dấu chấm lửng, thay vì một biên giới tròn.

<table class="table table-condensed table-hover table-striped"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>AAAA</th> 
      <th>AAAA</th> 
      <th>AAAA</th> 
      <th>AAAA</th> 
      <th>AAAA</th> 
      <th>AAAA</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style="width: 55px;" class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 15px;'><span class='fa-stack fa-lg'><i class='fa fa-circle fa-stack-2x text-info' style='border-radius: 100%; border: 2px solid #5cb85c;'></i><span class='fa fa-stack-1x fa-inverse' style='top: 3px;'>6</span></span></span></td> 
      <td>text</td> 
      <td>text</td> 
      <td>text</td> 
      <td>text</td> 
      <td>text</td> 
      <td>text</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Added line-height: 30px; trên text-info để sửa chữa các vòng tròn, và thay đổi fa-inversetop: 0px để đứng số trung tâm 6

<i class="fa fa-circle fa-stack-2x text-info" style="border-radius: 100%; border: 3px solid #5cb85c; line-height: 30px;"></i> 
<span class="fa fa-stack-1x fa-inverse" style="top: 0px;">6</span> 

http://jsfiddle.net/1qzqu83m/

Answer 2

Bạn không cần sử dụng FontAwesome cho vòng kết nối có giới hạn. Nó thực sự dễ dàng hơn để sử dụng CSS tinh khiết bởi vì bạn không cần phải thiết lập lại FontAwesome styling:

.circle-border { 
 
     display: inline-block; 
 
     color: black; 
 
     font: 18px sans-serif; 
 
     background: yellow; 
 
     border:2px solid green; 
 
     width: 30px; 
 
     height: 30px; 
 
     border-radius:17px; /* half of width + borders */ 
 
     line-height: 34px; /* vertical center */ 
 
     text-align: center; /* horizontal center */ 
 
    }

<div class="circle-border">6</div>