如何使用chrome扩展在网页中绘制图标？

Question

我制作了Chrome扩展程序，以突出显示网页上的电话号码。除了突出显示数字，我想在每个数字的末尾添加一个图标。在这里，我有两个选择：

1. 使用字体真棒图标。
2. 使用.ico文件。

字体真棒图标存在问题。当我尝试字体真棒unicodes时，它们呈现为空白方块和fa-phone类，没有任何渲染，可能是因为特定网站可能不支持字体真棒图标。我不知道如何解决这个问题。

如果字体真棒不是一个好主意，那么我想知道，如何在.ico中附加<span>文件。

Answer 1

我不太了解扩展，但网页基本上是用HTML和CSS构建的。

FontAwesome应首先与页面链接，然后添加HTML代码以显示图标。

图标可能没有显示，因为您有HTML代码但没有将CSS链接到页面。所以，不知何故，您需要将CSS文件与页面链接起来。

您可以像这样添加CSS文件的链接（需要托管CSS文件）：

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

或将文件附加到扩展程序中，因此不必从站点获取（推荐方法）。