在fa-circle上添加边框 [英] Add border to fa-circle
本文介绍了在fa-circle上添加边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何从Font Awesome的circle
图标中添加边框?其实我的结果是:
How can I add a border to the circle
icon from Font Awesome? Actually my result is:
边框类似于省略号,而不是圆形边框.
The border is something like an ellipsis, instead a circular border.
<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>
推荐答案
在text-info
上添加了line-height: 30px;
以修复圆,并将fa-inverse
top: 0px
更改为垂直中心编号6
Added line-height: 30px;
on text-info
to fix the circle, and changed fa-inverse
top: 0px
to vertical center number 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>
这篇关于在fa-circle上添加边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文