Exporting HTML icons as PDF

Question

I have a webpage with material-icon and font-awesome icons. However, when I try to export the HTML website as PDF (using web tools, plugins or Adobe Acrobat DC for Mac), the icons are not shown (it just shows a the name of the icon).

I am including the css references to both sets of icons like this in my index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

If then I try to use a material.io icon in my index.html as follows:

<i class="material-icons">translate</i>

the result is:

• The icon is shown in the browser (good).
• Some tools to export HTML as PDF can handle it (however, they do not allow me to select texts, so my PDF is a bit poor).
• Other tools cannot process those icons (as Adobe Acrobat DC, which allows text selection in exported PDFs). In the example above, it just shows the text "translate" instead of the icon associated to "translate".

Is there any way I can change my index.html, or CSS file or exportation tools to make the icons are shown when exporting to PDF? By the way, the same happens with font-awesome, not only with material-icons.

Thanks a lot and kind regards.

Answer 1

You can use selenium / phantomJS to take the screenshot of the HTML page and create pdf of same.

from selenium import webdriver
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

driver = webdriver.PhantomJS(desired_capabilities=dcap)
driver.get(url);