How to click an icon without clicking the image behind it?

I have an image with an icon on top if it:

<font-awesome-icon class="icons bookmark" icon="fa-solid fa-bookmark"></font-awesome-icon>
  <img :src="images[0]" @click.native="visit(l._id)" />

But on mobile devices, it ALWAYS clicks the image behind the icon. Is there a way to prevent this?

Here are my CSS classes:

<style scoped>
img {
    border-radius: 25px;
    margin: 8px;
    width: calc(100% - 50%);
}

.icons.bookmark {
    font-size: 1.5em;
    z-index: 100;
    position: absolute;
    top: 20px;
    left: 1em;
}

.icons.bookmark:hover {
    color: green;
}
</style>

here it is on the image: