缺少CSS需要修复

Question

我昨天在这里实施了我的设计：https://jsfiddle.net/8f3vLh0a/17/

它在设计上使用了字体真棒。现在我的问题是当我删除旧的跨度图标w / c是使用这行代码的图像：

  <span class="icon home "></span>

它实际上会破坏此版本上显示的字体真棒图标的间距：https://jsfiddle.net/7869qLmx/1/

必须以屏幕为中心。我怎样才能做到这一点？我应该移动哪个CSS？

这是我当前的JSFIDDLE版本：https://jsfiddle.net/7869qLmx/1/

Answer 1

我认为这是因为i.fa类中的保证金

i.fa {
  position:absolute;
  pointer-events:none;
  color:white ;
  top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -45px;
}

我已经在我的小提琴中更新了。

检查出来 https://jsfiddle.net/sesn/7869qLmx/3/

Answer 2

尝试更改i.fs类的边距

i.fa {
  position:absolute;
  pointer-events:none;
  color:white ;
  margin:16px 0 0 14px;

}

这是jsfiddle https://jsfiddle.net/7869qLmx/4/

Answer 3

图像用作字体。所以身体上缺少字体大小。 添加到您的css代码
body {font-size：14px; } 并且图像的大小也太正确了。

body { font-size : 14px; }