给 fa-circle 添加边框

Question

我该怎样给 Font Awesome 中的 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>

- Khrys

---

可能是重复的问题：如何将Font Awesome图标放在圆形中？ - Michelangelo

Answer 1

在 text-info 上添加了 line-height: 30px; 来修复圆形，将 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/

- Usman Arshad

Answer 2

您不需要使用FontAwesome来制作带边框的圆形。实际上，使用纯CSS更容易，因为您不必重置FontAwesome样式：

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

- Blaise

---

谢谢。我正在使用这个fiddle将它从FA更改为纯CSS：http://jsfiddle.net/qkm35398/1/ 在IE9中它可以工作，在Chrome中不行。看起来float会搞乱一些东西。你有什么建议吗？ - Khrys

Answer 3

我使用了这段代码来添加Facebook图标，你也可以使用并自定义它。

HTML：

<a class="align-items-center justify-content-center  d-flex roundbutton text-decoration-none socialSignInBtns" href="#">
<i class="fab fa-facebook-f fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>

CSS：

.socialSignInBtns {
    display: block;
    height: 5vw;
    width: 5vw;
    border-radius: 50%;
    box-shadow: 0px 1px 10px 0px rgb(181, 165, 196);
    border: 5px solid rgb(196, 189, 189);
}


.socialSignInBtns:hover {
    opacity: 0.7;
}

- Hamid.r Fahimi

Answer 4

试试这个：

.fa-circle {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

- Sai Rohit

---

这个修复方案如何解决问题？请详细说明并提供代码片段或 jsfiddler 链接。 - fauzimh