Question

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

我在HTML树中打印项目名称。这些项目在数据库中指定。在树项目中，名称由3列组成（例如，前缀，名字，姓氏;所以“ABC”，“John”，“Doe”=“ABC John Doe”）。

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

示例：

"\135","John","Doe"
"\137","Nancy","Davolio"
"\135","George","Buchanan"

将打印HTML树：

<li>\135 John Doe</li>
<li>\137 Nancy Davolio</li>
<li>\135 George Buchanan</li>

我的问题是，我需要用字体真棒图标替换此字符串（\ 135）的代码部分，但我无法操作HTML模板，因此我无法轻松添加类，我也无法使用CSS ::之前（例如here），因为图标不相同。我能做的就是添加CSS和JavaScript。

我没有想法如何以最简单的方式做到这一点。我能想到的只有用javascript在html中查找字符串然后在其父级中添加一个新类。但我希望有更简单的方法。

感谢您的回复！

Answer 1

我在下面做了一个非常粗略的尝试。此方法将css内容代码映射到具有单独调用的图标类，因此如果您使用所有图标，则此jQuery将变得非常庞大。但是，除了示例中的最后一个图标Babel之外，它的工作原理为：

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>\135 John Doe</li>
<li>\137 Nancy Davolio</li>
<li>\635 George Buchanan</li>
</ul>

{{1}}

字体真棒替换硬编码

1 个答案: