एफए-सर्कल

Question

पर सीमा जोड़ें फ़ॉन्ट विस्मयकारी से circle आइकन पर मैं सीमा कैसे जोड़ सकता हूं? वास्तव में मेरे परिणाम है:

http://jsfiddle.net/0jhdvj0k/

सीमा एक अंडाकार की तरह कुछ है, बजाय एक परिपत्र सीमा है।

<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

जोड़ा गया line-height: 30px; चक्र ठीक करने के लिए, और ऊर्ध्वाधर केंद्र संख्या 6

को fa-inverse top: 0px बदल

<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

आपको बोर्डर्ड सर्कल के लिए FontAwesome का उपयोग करने की आवश्यकता नहीं है। यह इसलिए है क्योंकि आप FontAwesome स्टाइल पुनर्स्थापित करने के लिए की जरूरत नहीं है शुद्ध सीएसएस का उपयोग करना आसान वास्तव में है: text-info पर

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