Question

我试图使用font-awesome stacking

进行此操作

我尝试了两种方法，但两者都很难看。问题是fa-square和fa-square-o的大小不同，所以当你堆叠它们时，它们不会排成一行！

<span class="fa fa-stack">
  <i class="fa fa-square fa-stack-1x"></i>
  <i class="fa fa-plus-square fa-stack-1x fa-inverse"></i>
  <i class="fa fa-square-o fa-stack-1x"></i>
</span>

<span class="fa fa-stack">
  <i class="fa fa-square fa-stack-1x fa-inverse"></i>
  <i class="fa fa-plus-square-o fa-stack-1x"></i>
</span>

结果是

我尝试使用css将fa-square缩小86％。但是，这非常脆弱，因为它取决于浏览器和缩放设置。我希望Chrome和IE11在多个缩放级别上的解决方案看起来都不错。

Answer 1

这可能会有所帮助。

body {
  background-color: tan;
  font-size: 100px;
}

.fix:before {
	background: #000;
	border-radius: 20%;
	padding: 1% 5%;
}

.fix-2:before {
	background: #000;
	border-radius: 20%;
	padding: 1% 10%;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-stack">
  <i class="fa fa-square fa-stack-1x fix"></i>
  <i class="fa fa-plus-square fa-stack-1x fa-inverse"></i>
</span>

<!-- Without Stacking -->
<i class="fa fa-plus-square fa-inverse fix-2"></i>

Answer 2

不幸的是，如果你想使用Font-Awesome的图标，你必须通过制作一个新一代fa-square 和所有衍生物（rss-square， ...）标准化图标的大小。

开发人员不再接受图标的拉取请求，因此可能需要很长时间才能被接受。（正如Hugues M.所说，这是一个众所周知的bug）

我看到的解决方法：

根据字体创建自己的图标（请参阅此post），覆盖方形unicode（f0c8）或获取其他免费图标。（并在github中推送您的解决方案）。它是通用的，你可以动态改变颜色，但需要很长时间。
或者只是为您的项目制作一张图片（SVG或其他内容），它很快但不太可塑。

字体很棒的堆叠方形和方形 - 不对齐

2 个答案: