How to Add Print This Page Widget on Your Webpage?
Step 1 – Printer Icon Images
Let us first upload a good looking printer icon image to the website. Below are some of the images you can use.
Get the complete URL of the image once it is uploaded on your site. For example, we use the first image in this example and the URL is be “https://img.webnots.com/2016/10/Printer.png”.
Step 2 – Insert HTML Code
The next step is to add the below HTML code on your webpage where you want to display the printer icon.
Ensure to change the URL with your own. If your image has different size then control the size with width and height parameters.
Step 3 – Testing On Browser
Users can either take a physical print out or save the webpage as PDF. Refer the article on how to convert webpage into PDF on Google Chrome.
Step 4 – Decorating Printer Icon
If you feel the image is so simple and want to add more decorations then use CSS to customize the look. You can add a CSS class to the HTML code like below along with style definitions:
The final widget will look like below and click on the printer icon to see the print dialog box popping up.
The background and border colors can be changed according to the color of your printer icon.