Código HTML:
1. Agregue el siguiente código HTML al `
` sección de su documento:
```html
```
Esta línea enlaza con un archivo CSS separado llamado "print.css", que contendrá los estilos específicos de impresión para su página web.
2. Dentro de la sección `
```html
```
Este código crea un enlace que activa la función de impresión del navegador cuando se hace clic. El atributo `target="_blank"` abre la página impresa en una nueva pestaña. Reemplace "print-icon.png" con la ruta del archivo de imagen real de su ícono de impresión.
Código CSS:
3. Cree un archivo CSS llamado "print.css" y agregue los siguientes estilos:
```css
@media imprimir {
cuerpo {
margen:0;
relleno:0;
familia de fuentes:Arial, Helvetica, sans-serif;
tamaño de fuente:12 puntos;
altura de línea:1,5 em;
}
#imprimir-icono {
pantalla:ninguna;
}
}
```
Estos estilos se aplican sólo cuando se imprime el documento. Eliminan márgenes y relleno, establecen la fuente y el tamaño de fuente y ocultan el icono "Imprimir esta página" para evitar que se muestre en la página impresa.
Ajustes:
- Siéntase libre de modificar los estilos de impresión en "print.css" a su gusto, como cambiar la fuente, el tamaño de fuente, los márgenes y cualquier otro estilo de formato que desee.
- Puede colocar el icono "Imprimir esta página" en cualquier lugar que desee utilizando el posicionamiento CSS.
- Reemplace "javascript:window.print()" en el atributo `href` con cualquier función JavaScript personalizada que desee ejecutar antes de imprimir el documento.
Con esta implementación, su página web ahora mostrará un ícono personalizado "Imprimir esta página" que, al hacer clic, iniciará instantáneamente el proceso de impresión, brindando una experiencia de impresión perfecta para sus usuarios.
