Font awesome stacking square and square-o don't align

Question

I'm trying to make this using font-awesome stacking

I've tried two ways, but both are ugly. The problem is that fa-square and fa-square-o are different sizes, so when you stack them, they don't line up!

my fiddle

<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>     

The result is

I have tried to scale down the fa-square by 86% using css. However, that is very fragile, because it depends on the browser and the zoom setting. I would like the solution to look good on both Chrome and IE11 at multiple zoom levels.

Answer 1

This might help.

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>