通过 JS 添加 Font Awesome 图标答案

【问题标题】：Add Font Awesome icon through JS通过 JS 添加 Font Awesome 图标
【发布时间】：2013-03-19 21:36:26
【问题描述】：

我正在使用 Font Awesome 图标构建 JQM 应用程序，如果我添加到 HTML <i class=icon-XXX></i> 中，一切都很好。如果我通过javascript创建它，就会出现问题。它永远不会出现！

此图标位于<ul /><li />中，我尝试触发“刷新”、“创建”……但没有任何反应。

有没有办法解决这个问题？提前致谢。

问候，

PS。我也在使用引导程序，我首先加载引导程序，然后加载 FA，如 FA 网页中所述...

更新（简单代码...）

var elemHtml = "" +
"<div data-type=\"tlf\" id=\"XXX\">
    <ul data-role=\"listview\" data-inset=\"true\" data-theme=\""+selectedTheme+"\">
        <li data-icon=\"false\">
            <a href=\"tel:600123456\"><i class=\"icon-phone\"></i>600123456</a>
        </li>
    </ul>
</div>";

$("#screen").contents().find("#screenBody").append(elemHtml);

JSP

<link rel="stylesheet" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="resources/css/font-awesome.min.css" />

<div id="screen">
    <div id="screenBody"></div>
</div>

【问题讨论】：

在添加元素后尝试。 $("#screenBody").find("a").addClass("icon-phone");
谢谢@Omar，但它不起作用。我试过初始化.listview()，然后添加<li> + .listview("resfresh")，什么也没有。
如果手动引用页面，会出现图标吗？
对不起，我的意思是$("#screenBody").find("i").addClass("icon-phone");

标签： jquery-mobile font-awesome

【解决方案1】：

我确实测试了下面的代码，它使用 Font-Awesome（没有 Bootstrap.js）正常工作。我还给了listview 一个 ID (#listviewtest)。

$(document).on('pagebeforeshow', function(){
 var elemHtml = 
  "<div data-type='tlf'>"
  + "<ul data-role='listview' data-inset='true' data-theme='' id='listviewtest'>"
   + "<li data-icon='false'><a href='tel:600123456'>"
   + "<i class='icon-phone'></i>600123456</a>"
   + "</li>"
   + "<li data-icon='false'><a href='tel:600123456'>"
   + "<i class='icon-remove-sign'></i>600123456</a>"
   + "</li>"
  + "</ul>"
  + "</div>";
 $("div[data-role='content']").append(elemHtml); // append to data-role='content'
 $('#listviewtest').listview();
});

【讨论】：