很棒的字体替换硬编码代码

Question

我遇到了字体超棒图标替换部分字符串的问题。

我在 HTML 树中打印项目名称。这些项目在数据库中指定。在树项中，名称由 3 列组成（例如前缀、名字、姓氏；因此 "ABC"、"John"、"Doe" = "ABC John Doe"）。

现在，我想使用前缀作为字体真棒图标。

示例：

"5","John","Doe"
"7","Nancy","Davolio"
"5","George","Buchanan"

其中 HTML 树将打印：

<li>5 John Doe</li>
<li>7 Nancy Davolio</li>
<li>5 George Buchanan</li>

我的问题是，我需要用 font awesome 图标替换字符串 (\135) 的代码部分，但我无法操作 HTML 模板，所以我无法添加 class 很容易，我也不能使用 CSS ::before（例如 here），因为图标不一样。我能做的是添加 CSS 和 JavaScript.

我不知道如何以最简单的方式做到这一点。我唯一能想到的就是用 javascript 在 html 中找到字符串，然后将新的 class 添加到它的父级。但我希望有更简单的方法。

感谢您的回复！

Answer 1

我在下面做了一个非常粗略的尝试。此方法通过单独调用将 css 内容代码映射到图标 class，因此如果您使用所有图标，此 jQuery 将变得巨大。但是，除了示例中的最后一个图标 I couldn't find 5 here，它有效：

$( document ).ready(function() {
  $("li:contains('\135')").html(function () {
    return $(this).html().replace("\135", "<i     class='fa fa-rocket'></i>"); 
  });
  $("li:contains('\137')").html(function () {
    return $(this).html().replace("\137", "<i     class='fa fa-chevron-circle-left'></i>"); 
  });
});

ul {
list-style: none;
  margin: 0;
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>5 John Doe</li>
<li>7 Nancy Davolio</li>
<li>5 George Buchanan</li>
</ul>

很棒的字体替换硬编码代码

Font awesome replacing hardcoded codes

javascript

css

font-awesome