9

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

enter image description here

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

enter image description here

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.

John Henckel
  • 10,274
  • 3
  • 79
  • 79
  • That's reported in [GitHub issue 5156](https://github.com/FortAwesome/Font-Awesome/issues/5156), and I see no good workaround – Hugues M. Jul 11 '17 at 19:01

2 Answers2

7

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>
Shaheed Mon
  • 471
  • 4
  • 8
5

Unfortunately, if you want to use the icons of Font-Awesome, you will have to contribute to the project by making a new generation of fa-square and all the derivatives (rss-square, ...) to standardize the size of the icons.

Developers no longer accept pull-request for icons so it may take a long time before it is accepted. (As Hugues M. said, it's a known bug)

The workarounds I see:

  • Create your own icon based on a font (see this post), override the square unicode (f0c8) or get an other free one. (and push your solution in github). It is generic, you can dynamically change the color but it take a long time.
  • Or simply make an image (SVG or something else) for your project, it's quick but less malleable.
J-Jamet
  • 847
  • 8
  • 17