Position stacked font awesome icon - html

Question

I am trying to create a "vegetarian" icon by stacking fa-circle on fa-square-o. The problem is that the circle is not centrally aligned vertically with respect to the square. I tried using margin/padding/vertical-align css properties but they have no effect whatsoever. my code is:
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x " ></i>
</span>

Answer 1

You can move it up, by adding a top:
.fa-stack-1x {
top: -1px;
}

Answer 2

By looking at the following example you can quickly guess, that the problem with centering the circle is not do to the circles vertical-align value, it's height, or top and left position.
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.fa-square-o {
color: rgb(0, 255, 0);
}
.fa-circle {
color: rgba(255, 0, 0, .5);
}
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
The circle just does not fit into the square, because the font-size value of the .fa-stack-2x class, with a default value of 2em, is oblivious too small for the circle to fit into the square.
The easiest way to fix this is by increasing the font-size value of the icon used as the fa-stack-2x element.
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.fa-square-o {
color: rgb(0, 255, 0);
font-size: 2.16em;
}
.fa-circle {
color: rgba(255, 0, 0, .5);
}
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>

Answer 3

from the documentation http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#stacked
A method for easily stacking multiple icons. Use the icon-stack class on the parent and icon-stack-base for the bottom icon. You may need to swap icon for fa depending on the implementation you are using
so try
<span class="icon-stack">
<i class="fa-square-0 icon-stack-base"></i>
<i class="fa fa-circle icon-light"></i>
If size is a problem you could use the fa-dot-circle-o then stack a white circle over it, leaving you with just a dot - or use a unicode font with the middle dot for the circle, eg unifoundry's unifont.
The standard way to vertically align in css is to set height and line-heightequal to each other, then set vertical-align: middle