Mettere icone sopra ad una immagine

[fermat]

ciao!

io ho questo codice:

<div id="vet" class="text-center">
    <i class="fas fa-arrow-circle-left fa-3x"></i>
    <img src="<?php echo $imgVetrina ?>" alt="<?php echo 'Vetrina' . $imgVetrina; ?>"
class="img-fluid rounded mb-4">
    <i class="fas fa-arrow-circle-right fa-3x"></i>
</div>

le due icone si vedono, giustamente, ai lati dell'immagine.
io vorrei metterle sopra all'immagine.
come posso fare??

[flydrose]

Mi verrebbe di dirti di fare un div per la trasparenza in modo da dare all'immagine una copertina trasparente, e poi inserire l'icona in un altro div con z-index

[fermat]

ho fatto così:

<style>
    #vet {
        position: relative;
    }

    #vet .fa-arrow-circle-left {
        position: absolute;
        bottom: 50%;
        left: 10%;
        color: black;
    }

    #vet .fa-arrow-circle-right {
        position: absolute;
        bottom: 50%;
        right: 10%;
        color: black;
    }
</style>
    <div id="vet" class="text-center">
        <i class="fas fa-arrow-circle-left fa-3x"></i>
        <img src="<?php echo $imgVetrina ?>" alt="<?php echo 'Vetrina' . $imgVetrina; ?>"
class="img-fluid rounded mb-4">
        <i class="fas fa-arrow-circle-right fa-3x"></i>
    </div>