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

Question

我无法让 FontAwesome 4.3.0 在我的页面上正确显示。在头部我有：

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

第一种样式 sheet 中的字体可以正常工作，但 4.3.0 中的字体不行。

Here is my demo site.

演示 1、3 和 6 周围的圆圈看起来水平拉伸。这些字体全部来自4.3.0
演示 2、4 和 5 没问题。

在此处查看问题：

此外，当您将视口设置为仅 320 像素宽时，4.3.0 字体会被推到绿色圆圈的一侧，如下所示：

这是一个直接 link 工作 css 文件：LINK

其中一种非工作字体的 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>

这里是服务图标的 CSS：

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

我无法运行 codepen 演示，但如果您坚持，我会再试一次。

如何使所有图标正确显示？谢谢！

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

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

FontAwesome 4.3.0 icons not displaying properly on my site

html

css

fonts

font-awesome