cooldood3490
¿Cómo coloco un ícono de descarga de FontAwesome sobre una imagen? Quiero que esté en la esquina inferior izquierda de la imagen. Cuando el usuario hace clic en el icono de descarga, aparece un mensaje que le pregunta si desea descargar la imagen.
Al igual que:
Código relevante
<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- download icon -->
<a href="https://loremflickr.com/320/240/dog" download="new-filename"><i class="fas fa-download"></i></a>
<!-- image of dog -->
<img src="https://loremflickr.com/320/240/dog" alt="dog">¿Este método también funciona con bootstrap 3 font-awesome? Es posible que desee agregar un botón como este en la esquina inferior izquierda:
Fuente impresionante de Bootstrap: https://fontawesome.com/v4.7.0/ejemplos/
Necesita un contenedor relativo alrededor de su imagen y luego configura su icono para que esté en posición: absolute.
.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<div class="container">
<img src="https://placekitten.com/300/300">
<a href="https://stackoverflow.com/questions/54508374/dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div>La razón por la que necesitas que tu img sea display: block es porque, por defecto, imgson display: inline y su img tendrá un espacio entre la parte inferior y la parte inferior del contenedor, por lo que su ícono de descarga aparecerá ligeramente debajo de su img. Configurándolo en display: block detiene esto.
Para superponer dos elementos, un enfoque es hacer un padre position: relativey luego la superposición position: absolute.
En este caso, este ejemplo debería funcionar, donde el icono de descarga puede ser cualquier elemento, como un botón de arranque.
.img-download {
position: relative;
}
.img-download > a {
position: absolute;
background: white;
bottom: 0;
left: 0;
}<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="img-download">
<!-- image of dog -->
<img src="https://loremflickr.com/320/240/dog" width="320" height="240" alt="dog">
<!-- download icon -->
<a href="https://loremflickr.com/320/240/dog" download="dog.jpg"><i class="fas fa-download"></i> Download</a>
</div>Permítanme agregar una variante, cuando necesite colocar el ícono en la esquina derecha de la imagen de ancho desconocido, no funciona con la respuesta anterior. Debe introducir un envoltorio de la siguiente manera:
.wrapper { display: flex; justify-content: center;}
.content { position: relative; width: max-content}
.content img { display: block; }
.content .fa-download { position: absolute; bottom:10px; right:10px; }<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<div class="wrapper">
<div class="content">
<img src="https://placekitten.com/300/300">
<a href="https://stackoverflow.com/questions/54508374/dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div>
</div>Creo que puedes resolver esto usando el índice z propiedad. Prueba esto:
<img style="z-index: 1;" src="https://stackoverflow.com/questions/54508374/dog.png" alt="dog">
<a style="z-index:2" href="https://stackoverflow.com/questions/54508374/dog.png" download="new-filename"><i class="fas fa-download"></i></a>