Kode_12 Kode_12 - 2 months ago 6x
CSS Question

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

I have font awesome icon like so:

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

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?


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.