Kode_12 Kode_12 - 3 months ago 10
CSS Question

How can I adjust the vertical position a font awesome icon?

I have font awesome icon like so:

<div>
<span >Total</span>
<i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
<span>11</span>
</div>


Here is a jsfiddle http://jsfiddle.net/JfGVE/1519/
Basically I want to have the option to move up or down the icon. I've tried adding in padding and margins, but nothing there.

How can I change the vertical position of the icon?

Answer

You can also just use line-height and vertical-align like so:

.cat-color {
  line-height: 9px;
  vertical-align: top;
}

And change the line height to a higher or lower value, to move the icon up or down.

I have made it move up.

http://jsfiddle.net/JfGVE/1520/

Comments