javascript - 字形图标(Halflings 和 Fontawesome)未显示。纯 html 与使用 js innerHTML

Question

我遇到了一件奇怪的事情。看到真的是明白，所以我做了一个例子jsfiddle。我有一个带有图标的 html 列表。一个列表呈现为纯 html。另一个完全相同的列表附加了 javascript。虽然元素完全一样，但是css是一样的。其中一个有右(和左)间距，另一个没有。我试过标记高度、宽度和元素类型，但似乎没有什么能让它们正确。谁知道我错过了什么以及为什么会这样。以及如何以一致的方式使用图标？

标记(参见 fiddle 的 css 和其他图标集)

<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;

jsfiddle

Answer 1

首先，i不能是 ul 的直系子代, 只有 li能。它不会导致您看到的问题，但我仍然认为您应该解决这个问题。

真正的问题是您没有使用 javascript 插入完全相同的代码。

这个

<ul class="list-horizontal">
    <i class="fa fa-bars"></i>
    <li> 
        <a href="#">A new thing</a>
    </li>
</ul>

和这个不一样

<ul class="list-horizontal"><i class="fa fa-bars"></i><li><a href="#">A new thing</a></li></ul>

两者都是i和 a是内联元素，因此所有空白(制表符、空格、换行符)都将折叠并呈现为单个空格。您使用 javascript 注入(inject)的代码没有空格，因此您看不到标记中的空格。

看看更新后的 fiddle ，我从标记中删除了空格(并修复了无效的 html): http://jsfiddle.net/kb3gN/8734/