绘制边框问题CSS字体真棒图标

Question

我正在使用css很棒的字体图标（https://fortawesome.github.io/Font-Awesome/），我正在尝试使用css规则在它们周围绘制圆形或方形边框。

<i class="fa fa-check-circle fa-5x fa-square"></i>

目标css规则是..

.fa-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em;  }
.fa-square {   color: #b0b0b0;  border-radius:50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

没有边框的原始检查圈看起来像这样..

绘制边框时的实际输出显示FF和Safari中的奇怪输出

我在其他帖子中使用了这一行，但它无效。

text-rendering: optimizeLegibility;

我该如何解决？

Answer 1

请运行下面的代码段，

＆＃13;

＆＃13;

.border-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em;  }
.border-square {   color: #b0b0b0;  border-radius:25%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-check-circle fa-3x border-circle"></i>
<i class="fa fa-check-circle fa-3x border-square"></i>
<i class="fa fa-check-square fa-3x border-circle"></i>
<i class="fa fa-check-square fa-3x border-square"></i>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是你使用fa-square作为类名，它与现有的一个字体真棒类冲突。您基本上是在尝试合并两个不是您想要的图标。

相反，请避免使用相同的类命名约定，因为即使您选择一个唯一的命名约定，它也可能会在以后的版本中使用。

例如，按如下方式更改fa-square：

.my-square {   color: #b0b0b0;  border-radius:10%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

然后你的html就像这样：

<i class="fa fa-check-circle fa-5x my-square"></i>

Here is a working example