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

-1

我正在用字体超棒的图标替换部分字符串。替换硬编码代码的字体真棒

我在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 :: before（例如here），因为图标不相同。我可以做的是添加CSS和JavaScript。

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

谢谢你的回复！

来源

2016-11-28 user2160408

有没有前缀和图标之间有关联吗？ – baao

是的，前缀是来自Font Awesome码本的图标代码。 – user2160408

你使用什么代码？ –

我在下面做了一个非常粗略的尝试。此方法使用不同的调用将css内容代码映射到图标类，因此如果您使用的是所有图标，则此jQuery将会变得非常庞大。但是，除了在示例中的最后一个图标，I couldn't find \635 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>\135 John Doe</li> 
 
<li>\137 Nancy Davolio</li> 
 
<li>\635 George Buchanan</li> 
 
</ul>

来源

2016-11-28 21:09:17

谢谢你，纳撒尼尔。我只使用了几个图标，所以代码不会很大。这个解决方案适合我，但我会保持这个线程一段时间，以防有更好的解决方案。非常感谢！ – user2160408

非常欢迎！如果你喜欢它，就投它吧。 :) –

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

回答

相关问题