FontAwesome Icons disturbs pixel during transformation - css

Question

I am using FontAwesome Icons in my application on a tree structure list. fa-caret-down and fa-caret-right disturbs my pixel like on right to dow it moves content right to 5 pixels during change fa-caret-right to fa-caret-down.
Here is my html code:
<i class="fa fa-caret-down"></i>
CSS:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
/*font-size: inherit;*/
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.fa-caret-right:before {
content: "\f0da";
}
.fa-caret-down:before {
content: "\f0d7";
}

Answer 1

Font Awesome has a fix for this.
Fixed Width Icons
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
Here you can find information on different Font Awesome Features.
ul {
list-style:none;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>
<span class="fa fa-caret-down fa-fw"></span>
Fruit
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Apple</li>
</ul>
</li>
<li>
<span class="fa fa-caret-right fa-fw"></span>
Animals
<ul>
<li>Monkey</li>
<li>Dog</li>
<li>Cat</li>
</ul>
</li>
</ul>

Answer 2

You have to remember that Font-Awesome icons are nothing more than simple characters - letters, if you like. The letter 'W' for example is wider than the letter 'I' - equally .fa-caret-down is wider than .fa-caret-right.
To overcome this problem, one solution to this is to define a specific width on your i element to stop different icons from influencing this value themselves:
i.fa {
text-align: center; /* If you want the icons to appear central. */
width: 20px; /* Adjust accordingly. */
}