FontAwesome 4.3.0图标在我的网站上无法正确显示

Question

我在网页上无法正确显示FontAwesome 4.3.0图标库。在head头部分，我的代码如下:

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

第一个样式表中的字体工作正常，但4.3.0版本中的字体无法正常工作。

这是我的演示网站。

• 演示1、3和6周围的圆形看起来水平拉伸。这些字体都来自4.3.0版。
• 演示2、4和5没有问题。

在这里查看问题：

此外，当视口宽度仅约320像素时，4.3.0版字体会被推到它们所在的绿色圆形的边缘，如下图所示：

这是工作的CSS文件的直接链接：链接

其中一个不工作的字体的HTML代码如下：

<div class="col-md-4 wow fadeInRight" data-wow-duration="500ms"  data-wow-delay="900ms">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fa fa-diamond fa-2x"></i>
                            </div>

                            <div class="service-desc">
                                <h3>Demo3</h3>
                                <p>Demo</p>
                            </div>
                        </div>
                    </div>

以下是service-icon的CSS代码：

.service-icon {
border: 1px solid #2ECC71;
border-radius: 50%;
color: #2ECC71;
float: left;
padding: 10px 13px;
}

如果您坚持，我可以再尝试一下，但我无法使codepen演示正常运行。

我该如何让所有图标都正确显示？谢谢！

- Nova

Answer 1

您没有为.service-icon设置特定的宽度和高度，因此它的大小基本上是由font-awesome字形的大小决定的。这意味着您只能获得完美的圆形图标，对于那些完全正方形的字形。将.service-icon强制成一个正方形，您就会得到正确的圆形。

居中问题是由同样的原因引起的；您将相同的填充应用于所有内容，无论其是否是正方形，因此只有正方形字形被居中。使用text-align:center进行水平居中，使用line-height=div height技巧进行垂直居中。我使用了4em x 4em的尺寸，但您可能需要调整一下：

.service-icon {
    border: 1px solid #2ECC71;
    border-radius: 50%;
    color: #2ECC71;
    float: left;
    line-height:4em;
    width: 4em;
    height: 4em;
    text-align: center;
}

- chiliNUT