在fa-circle上添加边框

Khrys 发表于 Dev

赫里斯

如何circle从Awesome字体向图标添加边框？实际上，我的结果是：

边框类似于省略号，而不是圆形边框。

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

乌斯曼·阿沙德（Usman Arshad）

增加了line-height: 30px;对text-info固定圈，改fa-inverse top: 0px垂直中心号码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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。