Buenas. Estoy intentando hacer un boton con un texto y un icono para descargar un PDF en entradas de Wordpress.
He probado en JSFIDDLE y funciona de maravilla.
#dwnld-pdf {
clear: both;
padding: 0.8% 0;
display: flex;
border: 1.2px solid;
width: 232px;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: center;
}
#dwn-img { /* div imagen */
display: flex;
width: 28px;
}
<a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download>
<div id="dwn-img"><img src="https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-046_file_pdf-512.png" alt="Icono de archivo PDF"></div><div>Descarga el archivo siguiente</div>
</a>
Pero en Wordpress me genera el siguiente HTML y queda muy feo:
#dwnld-pdf {
clear: both;
padding: 0.8% 0;
display: flex;
border: 1.2px solid;
width: 232px;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: center;
}
#dwn-img { /* div imagen */
display: flex;
width: 28px;
}
<a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download=""><p></p>
<div id="dwn-img"><img src="http://localhost/html_preg/wp-content/uploads/2015/10/adobe_pdf_document_01.gif" alt="Icono de archivo PDF"></div>
<div>Descarga el archivo siguiente</div>
</a><p><a id="dwnld-pdf" class="clearfix" href="" title="Descarga el archivo archivo" download=""></a>
</p>
En Vivaldi Y Google Chrome directamente no parece funcionar en el JSFIDDLE el CSS y no se visualiza bien.