How can I canvas an icon in web pages using chrome extension?

Question

I built a Chrome extension, to highlight phone numbers on web pages. Besides highlighting the numbers I want to append an icon at the end of each number. Here I have two options:

1. Using font awesome icons.
2. Using .ico file.

There is a problem with font awesome icons. When I tried font awesome unicodes they are rendering as blank squares and with fa-phone class, nothing had rendered, may be because of the particular site may not support font awesome icons. I don't know how to solve the issue.

If font awesome is not a good idea, then I want to know, How can I append .ico file in <span>.

Answer 1

I don't know much about making extensions but web pages are basically built from HTML and CSS.

FontAwesome should first be linked with the page and then add the HTML code to show the icon.

Icons is probably not showing because you have the HTML code but didn't link the CSS to the page. So somehow, you need to link the CSS file with the page.

You could add the link to CSS file like so (Requires hosting the CSS file):

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

or attach the file in the extension, so it doesn't have to be fetched from a site (recommended method).