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

【问题标题】：Issue with drawing borders CSS font awesome icons绘制边框的问题 CSS 字体真棒图标
【发布时间】：2015-12-11 23:34:00
【问题描述】：

我正在使用 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;

我该如何解决？

【问题讨论】：

使用浏览器前缀，因为大多数浏览器不支持没有前缀的新 css3 属性。
你能提供一个例子 jsfiddle 吗？我认为这应该可以正常工作，所以我希望您正在更改其他内容
Make Font Awesome icons in the round circle?的可能重复

标签： html css

【解决方案1】：

请运行下面的代码sn-p，

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

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

【讨论】：

【解决方案2】：

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

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

例如，将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

【讨论】：