I run into a strange thing. To see is really to understand, so I've made an example jsfiddle. I got a html list with an icon. One list renders as plain html. The other exact-same-list is appended with javascript. Although the elements are exactly the same, the css is the same. One of them has right (and left) spacing and the other not. I played around with the markup heigh, width and element type, but nothing seems to get them right. Who knows what I'm missing and why this happens. And how to use the icons in a consistent way?
the markup (see fiddle for css and other icon set)
<div id="content1">
<ul class="list-horizontal">
<i class="fa fa-bars"></i>
<li>
<a href="#">A new thing</a>
</li>
</ul>
</div>
<div id="content2"></div>
/* string is the same as markup above */
var stringAwsome = '<ul class="list-horizontal"><i class="fa fa-bars"></i><li><a href="#">A new thing</a></li></ul>';
var div = document.getElementById('content2');
div.innerHTML = div.innerHTML + stringAwsome;
First of all, i can not be a direct child of ul, only li can. It is not causing the issue you are seeing, but I still think you should fix that.
The real problem is that you are not inserting the exact same code with javascript.
this
<ul class="list-horizontal">
<i class="fa fa-bars"></i>
<li>
<a href="#">A new thing</a>
</li>
</ul>
is not the same as this
<ul class="list-horizontal"><i class="fa fa-bars"></i><li><a href="#">A new thing</a></li></ul>
both i and a are inline elements, so all the whitespace (tabs, spaces, line breaks) will be collapsed and rendered as a single space. The code you inject with javascript has no whitespace, so you are not seeing the space you get in your markup.
Have a look at the updated fiddle where I removed the whitespace from the markup (and fixed the invalid html): http://jsfiddle.net/kb3gN/8734/