Font-Awesome stack not working correctly?

font-awesome

Solution

To get it to work as I expected it to, I changed font-awesome CSS file. At line 168, it looks like this:

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}

Notice that the stack only has 1x & 2x options. So I added a 3x & 4x.

.fa-stack-1x,
.fa-stack-2x,
.fa-stack-3x,
.fa-stack-4x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-stack-3x {
  font-size: 3em;
}
.fa-stack-4x {
  font-size: 4em;
}

You may have to tweak a bit more to get it to line up just right. The higher the em's go, the less they line up correctly in different browsers.

But, in the end, I ended up using a border because we wanted to do something different on phone sizes, and it was simpler to edit that CSS in the @media queries.

Problem

Weird problem with Font Awesome. I'm trying to make a larger circle around my social media icon. If I change the first stacked icon to a size larger than 2x, it reverts back to the 1x size. This code works: ``` <span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-facebook fa-stack-1x"></i> </span> ``` This code doesn't: ``` <span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-3x"></i> <i class="fa fa-facebook fa-stack-1x"></i> </span> ``` If I use 3x or 4x, etc, the lower image gets set back to the normal size. Is this a bug, or am I doing something wrong here? Using Font Awesome v 4.1.0. EDIT - because this note keeps getting views / comments. My problem was that font-awesome only has the 1x and 2x proportions, where I wanted a much larger background image and a smaller icon (at more like like 4x).

Original source