使用$ .get（）检索HTML片段后，字体真棒图标消失

Question

我想尝试创建一个“单页”体验，我已经通过在jQuery中编写一个事件监听器来实现这一点，以获得菜单链接点击。发生这种情况时，HTML代码段会替换我的主要内容div中的标记。例如：

//this is inside the 'on click'
$.get("includes/portfolio.inc", function(data) {
    $("#content").html(data)
}, "HTML");

一切都很好......除了我在font-awesome中使用的列表项目符号消失了。它们存在于用户登陆的第一个硬编码页面上，但在作为片段的一部分被检索时不会呈现。以下是HTML代码段：

<h1>A Header!</h1>
<ul>
    <li><i class=\"fa fa-chevron-circle-right\"></i> Example Link</li>
    ...
</ul>

这种造型有消失的原因吗？片段上的.inc扩展是否可能导致问题？文件的其余部分保持不变，包括指向外部样式表和脚本的链接，其余的标记呈现没有问题。我将不胜感激任何帮助！

更新：我在console.log(data);匿名函数中添加了$.get()，并输出<li>元素并保持<i class="fa ...">完整。

导入的标记的其余部分遵循我的样式表，它似乎忽略了字体很棒的类。

Answer 1

在发布的代码中，使用反斜杠转义双引号。这是不必要的，并且导致<i>元素在没有font-awesome类的情况下呈现。浏览器未看到属性值.fa和.fa-chevron-circle-right，因为语法不正确，因此样式未应用于元素。

当您从PHP或JavaScript文件进行复制并且正在复制的源被转义以防止错误时，可能会发生这种情况。