CODEWITHSUNDEEP
htmlcssfont-awesome
Shreyans
Shreyans

Reputation: 1061

Position stacked font awesome icon

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>

enter image description here

Upvotes: 3

Views: 8326

Answers (3)

DavidDomain
DavidDomain

Reputation: 15293

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>

Upvotes: 2

Mousey
Mousey

Reputation: 1865

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

Upvotes: 0

razemauze
razemauze

Reputation: 2676

You can move it up, by adding a top:

.fa-stack-1x {
    top: -1px;
}

Upvotes: 8

Related Questions