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的周围圆圈看起来水平拉伸。这些字体全部来自4.3.0
演示2,4和5都没问题。

在此处查看问题：

enter image description here

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

wrong

以下是工作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，因此它的大小或多或少取决于字体 - 令人敬畏的字形的大小。这意味着你只会获得完美正方形的字形的完美圆圈。强制.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图标在我的网站上无法正常显示

1 个答案: