我的网站上未正确显示 FontAwesome 4.3.0 图标答案

【问题标题】：FontAwesome 4.3.0 icons not displaying properly on my site我的网站上未正确显示 FontAwesome 4.3.0 图标
【发布时间】：2016-02-18 08:22:21
【问题描述】：

我无法让 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 的周围圆圈看起来是水平拉伸的。这些字体均来自 4.3.0
演示 2、4 和 5 都很好。

在这里查看问题：

此外，当您将视口设置为仅 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 演示工作，但如果您坚持，我会再试一次。

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

【问题讨论】：

标签： html css fonts font-awesome

【解决方案1】：

您没有为.service-icon 设置特定的宽度和高度，因此它的大小或多或少取决于字体真棒字形的大小。所以这意味着你只会得到完美的圆形字形完全方形的字形。强制.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;
}

【讨论】：