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

第一个样式表中的字体工作正常，但 4.3.0 中的字体不行。

Here is my demo site.

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

在这里查看问题:

此外，当您将视口(viewport)设置为仅 320 像素宽时，4.3.0 字体会被推到绿色圆圈的一侧，它们就像这样:

这里是工作 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;
}