在 Java 脚本中嵌入 Font Awesome 图标

Question

您好，我正在尝试在某些 JavaScript 中嵌入字体超棒的图标。 JavaScript（我在网上找到的）在我的网站上创建自动面包屑。这是 JavaScript:

<script language="JavaScript">

function breadcrumbs(){
  sURL = new String;
  bits = new Object;
  var x = 0;
  var stop = 0;
  var output = "<a href=\"/\">home</a> &nbsp;>&nbsp; "; 
  sURL = location.href;
  sURL = sURL.slice(8,sURL.length); 
  chunkStart = sURL.indexOf("/");
  sURL = sURL.slice(chunkStart+1,sURL.length)
  while(!stop){
    chunkStart = sURL.indexOf("/");
    if (chunkStart != -1){
      bits[x] = sURL.slice(0,chunkStart)
      sURL = sURL.slice(chunkStart+1,sURL.length);
    }else{
      stop = 1;
    }
    x++;
  }
  for(var i in bits){
    output += "<a href=\"";
    for(y=1;y<x-i;y++){
      output += "../";
    }
    output += bits[i] + "/\">" + bits[i] + "</a> &nbsp;>&nbsp; ";
  }
  document.write(output + document.title);
}

<!--
breadcrumbs();
 -->
</script>

该代码运行良好，完全符合我的要求。但是代替单词 "home" 我想显示字体 Awesome Icon.

所以这里写着家。

var output = "<a href=\"/\">home</a> &nbsp;>&nbsp; ";

我把它改成...

var output = "<a href=\"/\"><i class="fa fa-home fa-lg"></i></a> &nbsp;>&nbsp; ";

认为它会显示很棒的字体图标而不是单词 "home" 但它实际上只是破坏了代码，没有任何显示。

我是 JavaScript 的新手，所以我不确定为什么它不起作用。请帮忙！

Answer 1

将您的输出用单引号而不是双引号括起来，这样它就不会与 class="fa fa-home fa-lg" 的双引号冲突。这也将允许您删除 href.

附近的 \"

var output = '<a href=""><i class="fa fa-home fa-lg"></i></a>&nbsp;>&nbsp;';

\" 用于在双引号包围的字符串中转义双引号。虽然它工作得很好，但可读性不佳。有关字符串用法的更多信息，请参阅 this doc。

Answer 2

您应该结合使用 "" 和 '' 以使字符串连接变得简单易读。

var output = "<a href='/'><i class='fa fa-home fa-lg'></i></a> &nbsp;>&nbsp; ";

会起作用。

在 Java 脚本中嵌入 Font Awesome 图标

Embedding Font Awesome Icon inside of Java Script

javascript

font-awesome