字体真棒堆叠方形和方形o不对齐

Question

我正在尝试使用font-awesome堆叠来实现这一点

我尝试了两种方法,但两者都很难看.问题是,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>     

结果是

我试图fa-square用css 缩小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.所说,这是一个已知的错误)

我看到的解决方法:

• 根据字体创建自己的图标(请参阅此文章),覆盖方形unicode(f0c8)或获取其他免费图标.(并在github中推送您的解决方案).它是通用的,你可以动态改变颜色,但需要很长时间.
• 或者只是为您的项目制作一个图像(SVG或其他),它很快但不太可塑.