How to offset overlapped Font Awesome icons?

Question

Is there a way to overlap two Font Awesome icons in such a way that it looks like the files icon with respect to the file icon? I don't want to stack the icons but rather have one cover like 50% of another. Thanks!

Answer 1

Why not just use CSS padding to offset one of the icons?

<span class="fa-stack fa-lg">
  <i class="fa fa-file fa-stack-2x"></i>
  <i class="fa fa-file fa-stack-2x" style="padding-left:15px;padding-top:15px;"></i>
</span>

Fiddle: http://jsfiddle.net/mwatz122/sx7fk582/