Sınır çemberine sınır ekleme

Question

Yazı Tipi Başarısı'ndan circle simgesine nasıl kenarlık ekleyebilirim? Aslında benim sonucudur:

http://jsfiddle.net/0jhdvj0k/

sınır üç nokta gibi bir şey, bunun yerine bir dairesel sınırdır.

<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

Eklendi line-height: 30px; ve dikey merkezi numarasına 6

için fa-inverse top: 0px değişti

<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

Sen bir bordürlü daire için FontAwesome kullanmaya gerek yoktur. Bu FontAwesome stil sıfırlamak yok çünkü saf CSS kullanmak aslında kolay: daire düzeltmek için text-info üzerine

.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>