Stacking Font Awesome Icons

Sometimes you have this:

When what you really want is this:

How can you do that?

Easy!

Per the docs, you can stack your desired icons using a span with nested i tags, like this:

<span class="fa-stack fa-2x">
  <i class="fa-solid fa-camera fa-stack-1x"></i>
  <i class="fa-solid fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

The key is to use the 'fa-stack-1x' and 'fa-stack-2x' classes, and to make sure your icons are in the correct order (notice that the Ban icon comes after the Camera icon in the HTML).

You can install the free Font Awesome gem for Rails, found here, which will allow you to use the Rails helper. When you do, the Rails equivalent of the above is:

<%= tag.span class: "fa-stack fa-2x" do %>
  <%= fa_icon "camera", weight: "fa-solid fa-stack-1x" %>
  <%= fa_icon "ban", weight: "fa-solid fa-stack-2x", style: "color:Tomato" %>
<% end %>

Notice that you no longer need to use the 'fa-' prefix when declaring the icon name, and that you still need to drop down to an inline style declaration to specify the color.