字体真棒背景 + 大小

Question

很久以前我用很棒的字体做了这个：

对于我的一生，我不记得我是怎么做到的。我试着用这个复制它：

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa fa-home fa-stack-1x"></i>
</span>

我在上面的代码中使用了这个资源：Stacked Icons, Twitter

这个问题是房子太大了，背景和我很久以前做的不一样（想想#fff）。在 fontawesome 网站上，它似乎具有浅色背景，但是当将其实施到我的网站时（该网站的背景是#1F1F1F），它似乎采用与该网站相同的背景。

有谁知道我以前是如何做到这一点的，现在我很挣扎？

Answer 1

问题：太大

您正在使用 fa-lg class。这使它变得过大。删除这个。

问题：背景错误

使用fa-square class（实心圆角正方形，而不是像fa-square-o那样的轮廓），并使用CSS使其变亮（使用color: lightgrey).

（在下面的例子中，我也将背景调暗以更好地显示正方形的浅色背景）。

body {
  background-color: black;
}
.light {
  color: lightgrey;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<span class="fa-stack">
  <i class="fa fa-square fa-stack-2x light"></i>
  <i class="fa fa fa-home fa-stack-1x"></i>
</span>

字体真棒背景 + 大小

Font Awesome background + Size

font-awesome